> ## Documentation Index > Fetch the complete documentation index at: https://docs.jinba.io/llms.txt > Use this file to discover all available pages before exploring further. # Mermaid Diagram > Convert Mermaid diagram code to images (PNG/SVG/PDF) ## Overview Mermaid is a diagram and flowchart tool that converts text-based syntax into visual diagrams. It supports various diagram types including flowcharts, sequence diagrams, class diagrams, state diagrams, and more. The tool generates high-quality images (PNG, SVG, or PDF) from Mermaid code. **Runs in E2B sandbox environment**, so you don't need to install mermaid-cli locally. The conversion process is executed securely in an isolated environment with Node.js and Chromium pre-installed. ## Key Features ### MERMAID\_CONVERT * Convert Mermaid diagram code to PNG, SVG, or PDF images * **Runs securely in E2B sandbox environment** - no local installation required * Supports all Mermaid diagram types * Background color options: transparent or white (PNG only) * Clean, high-quality diagram output * Returns a signed URL for downloading the generated image ## Authentication No authentication required for Mermaid tools. ## Example: Business Approval Workflow ```yaml theme={null} - id: create_approval_flowchart name: create_approval_flowchart tool: MERMAID_CONVERT input: - name: diagram value: | flowchart TD Start([Application Start]) --> A[Staff creates application] A --> B[Manager reviews] B --> C{Review result} C -->|Issues found| D[Return for revision] D --> A C -->|Approved| E[Approved] E --> F[Share with Admin Department] F --> G[Admin processes] G --> End([Complete]) style Start fill:#4a90e2,stroke:#357abd,color:#fff style End fill:#4a90e2,stroke:#357abd,color:#fff style E fill:#66bb6a,stroke:#4caf50,color:#fff style D fill:#ef5350,stroke:#f44336,color:#fff - name: outputFormat value: "png" - name: backgroundColor value: "white" # Result: {{steps.create_approval_flowchart.result}} # A signed URL to download the PNG image ``` ## Example: Sequence Diagram ```yaml theme={null} - id: create_sequence_diagram name: create_sequence_diagram tool: MERMAID_CONVERT input: - name: diagram value: | sequenceDiagram participant User participant API participant Database User->>API: Login request activate API API->>Database: Verify credentials activate Database Database-->>API: User found deactivate Database API-->>User: JWT token deactivate API User->>API: Get data (with token) activate API API->>Database: Fetch data activate Database Database-->>API: Return data deactivate Database API-->>User: JSON response deactivate API - name: outputFormat value: "svg" # Result: {{steps.create_sequence_diagram.result}} # A signed URL to download the SVG file ``` ## Example: State Diagram ```yaml theme={null} - id: create_state_diagram name: create_state_diagram tool: MERMAID_CONVERT input: - name: diagram value: | stateDiagram-v2 [*] --> Draft Draft --> Review: Submit Review --> Approved: Accept Review --> Rejected: Reject Rejected --> Draft: Revise Approved --> Published: Publish Published --> Archived: Archive Archived --> [*] note right of Review Manager reviews the content end note - name: outputFormat value: "pdf" # Result: {{steps.create_state_diagram.result}} # A signed URL to download the PDF file ``` ## Supported Diagram Types | Type | Description | Use Case | | ---------------- | -------------------------------- | --------------------------------------- | | Flowchart | Process flows and decision trees | Business processes, workflows | | Sequence Diagram | Interaction between entities | API flows, communication protocols | | Class Diagram | UML class relationships | Software architecture, data models | | State Diagram | State transitions | Application states, status workflows | | ER Diagram | Database relationships | Database design, data modeling | | Gantt Chart | Project timelines | Project planning, schedules | | Pie Chart | Data proportions | Statistics, reports | | Git Graph | Version control flows | Release processes, branching strategies | | User Journey | User experience flows | UX design, customer journeys | | Mindmap | Hierarchical ideas | Brainstorming, concept mapping | | Timeline | Event sequences | Historical events, roadmaps | ## Basic Syntax Examples ### Flowchart ```mermaid theme={null} flowchart LR A[Start] --> B{Decision} B -->|Yes| C[Action 1] B -->|No| D[Action 2] ``` ### Sequence Diagram ```mermaid theme={null} sequenceDiagram Alice->>Bob: Hello Bob! Bob-->>Alice: Hi Alice! ``` ### Class Diagram ```mermaid theme={null} classDiagram Animal <|-- Dog Animal <|-- Cat Animal: +String name Animal: +makeSound() ``` ### State Diagram ```mermaid theme={null} stateDiagram-v2 [*] --> Active Active --> Inactive Inactive --> Active ``` ## Styling and Theming ### Custom Colors ```mermaid theme={null} %%{ init: { 'theme': 'base', 'themeVariables': { 'primaryColor': '#ff6600' } } }%% flowchart TD A[Styled Node] ``` ### Node Styling ```mermaid theme={null} flowchart TD A[Normal] B[Important] C[Success] style B fill:#ff6600,stroke:#ff4400,color:#fff style C fill:#66bb6a,stroke:#4caf50,color:#fff ``` ## Use Cases * **Business Process Documentation**: Approval workflows, operational procedures * **System Architecture**: API interactions, microservices communication * **Database Design**: ER diagrams, schema relationships * **Project Planning**: Gantt charts, timelines * **Technical Documentation**: Class diagrams, state machines * **User Experience**: User journeys, interaction flows * **Version Control**: Git branching strategies, release processes ## Best Practices ### Diagram Design * Keep diagrams focused and not too complex * Use clear, descriptive labels * Apply consistent styling * Add notes for important context * Use appropriate diagram type for the use case ### Formatting * Use proper indentation for readability * Group related elements together * Use comments to explain complex logic * Test diagrams before using in production ### Performance * Large diagrams may require longer timeout * Consider splitting very complex diagrams * Use SVG for web display (smaller file size) * Use PNG/PDF for documents and presentations ### Accessibility * Use high contrast colors * Include descriptive labels * Provide alternative text descriptions * Ensure font sizes are readable ## Output Format Recommendations | Format | Best For | Advantages | | ------ | ------------------------------ | ------------------------------------------ | | PNG | Documents, presentations, web | Universal support, transparent backgrounds | | SVG | Web display, scalable graphics | Small file size, infinite scaling | | PDF | Print, documentation | Professional output, embedded fonts | ## Limitations * Very complex diagrams may hit timeout limits * File size limits apply for output-files API * Background color option only works with PNG format * Some advanced Mermaid features may require specific versions For complete Mermaid syntax reference, visit [Mermaid Documentation](https://mermaid.js.org/).