Mermaid Diagram Renderer

Mermaid is a JavaScript-based diagramming tool that renders text definitions into diagrams. This tool auto-detects Mermaid syntax, renders it as an interactive SVG, and supports exporting to SVG or PNG. Supports flowcharts, sequence diagrams, class diagrams, ER diagrams, Gantt charts, pie charts, git graphs, mind maps, and more.

Spesifikasi

• Mermaid Documentation
• Mermaid Live Editor

Kasus Penggunaan Umum

• Visualize flowcharts and process diagrams from documentation
• Preview sequence diagrams for API interactions
• Render ER diagrams for database schema review
• Check Mermaid syntax before embedding in GitHub markdown
• Export diagrams for presentations or documentation
• Debug Mermaid rendering issues

Fitur

• Auto-detect Mermaid diagram syntax (flowcharts, sequence, class, ER, state, journey, gantt, pie, git, mindmap, timeline)
• Live SVG rendering with theme support (light/dark)
• Export diagrams as SVG or PNG
• Copy rendered SVG to clipboard
• Diagram type detection and metadata display
• Error display with source fallback for invalid syntax
• Mermaid code blocks inside Markdown are rendered as diagrams in the Markdown preview

Contoh

graph TD
  A[Start] --> B{Decision}
  B -->|Yes| C[Action]
  B -->|No| D[End]

sequenceDiagram
  Alice->>Bob: Hello Bob
  Bob-->>Alice: Hi Alice
  Alice->>Bob: How are you?
  Bob-->>Alice: Great!

erDiagram
  CUSTOMER ||--o{ ORDER : places
  ORDER ||--|{ LINE-ITEM : contains
  CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

pie title Browser Market Share
  "Chrome" : 65
  "Firefox" : 10
  "Safari" : 19
  "Edge" : 4
  "Other" : 2

Tips

• Mermaid diagrams are theme-aware — toggle dark mode to see the diagram adapt
• Use the PNG export for high-resolution (2x) images suitable for presentations
• Mermaid code blocks inside Markdown (```mermaid) are automatically rendered as diagrams
• If a diagram fails to render, check the source view for syntax errors