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

- 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

- 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

- 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

Sequence Diagram

Class Diagram

State Diagram

Styling and Theming

Custom Colors

Node Styling

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.