Mermaid Viewer
Mermaid Code
Preview
Your diagram will appear here
How It Works
- Step 1: Paste Mermaid diagram syntax including flowcharts, sequence diagrams, class diagrams, Gantt charts, or state diagrams using Mermaid markdown notation.
- Step 2: The viewer parses Mermaid syntax identifying diagram type (graph, sequenceDiagram, classDiagram), node definitions, relationships (-->, ===>, -.-), and styling directives.
- Step 3: Renders diagram using Mermaid.js library converting text notation into SVG graphics with automatic layout, node positioning, and connection routing.
- Step 4: Displays interactive diagram with zoom, pan, and export to PNG/SVG for documentation, presentations, or embedding in Markdown files (GitHub, GitLab, Notion).
Mermaid Diagram Examples
Example: Flowchart Rendering
graph TD
A[User Login] --> B{Valid Credentials?}
B -->|Yes| C[Load Dashboard]
B -->|No| D[Show Error]
C --> E[Fetch User Data]
E --> F[Display Profile]
D --> ARendered Flowchart:
┌─────────────┐
│ User Login │
└──────┬──────┘
│
▼
┌───────────────────┐
│ Valid Credentials?│
└────┬──────────┬───┘
│ │
Yes │ │ No
▼ ▼
┌───────────┐ ┌──────────┐
│ Load │ │ Show │
│ Dashboard │ │ Error │
└─────┬─────┘ └────┬─────┘
│ │
▼ │
┌───────────┐ │
│ Fetch │ │
│ User Data │ │
└─────┬─────┘ │
│ │
▼ │
┌───────────┐ │
│ Display │ │
│ Profile │ │
└───────────┘ │
│
┌─────────────┘
│
▼
(loops back to User Login)
Diagram Properties:
Type: Top-Down Flowchart (TD)
Nodes: 6 (rectangles for actions, diamond for decision)
Edges: 7 (directional arrows with labels)
Decision Points: 1 (Valid Credentials?)
Loops: 1 (Error → Login)
Export Options:
✓ PNG (for presentations)
✓ SVG (for web embedding)
✓ Markdown (for GitHub README)Key Changes:
The viewer transforms Mermaid text syntax into visual flowchart using automatic layout algorithms. The 'graph TD' declaration specifies top-down orientation. Node syntax uses brackets for shapes—[rectangle] for actions, {diamond} for decisions. Arrow syntax (-->) defines relationships with optional labels (|Yes|, |No|). The decision node 'Valid Credentials?' branches into two paths, demonstrating conditional logic flow. The loop from 'Show Error' back to 'User Login' represents retry logic. Mermaid.js automatically calculates node positions, avoiding overlaps and optimizing edge routing. This text-based diagramming is ideal for version control—changes are visible in Git diffs unlike binary image formats. Developers embed Mermaid in GitHub README files for architecture documentation, in GitLab wikis for process flows, and in Notion pages for system design. The rendered SVG is scalable without quality loss, suitable for high-resolution documentation and presentations.
Frequently Asked Questions
What diagram types does Mermaid support and what are their use cases?
Mermaid supports 12+ diagram types: Flowcharts (decision trees, process flows with shapes like rectangles, diamonds, circles), Sequence Diagrams (API interactions, message passing between actors/systems), Class Diagrams (UML class relationships with inheritance, composition, aggregation), State Diagrams (finite state machines, workflow states), Entity Relationship Diagrams (database schemas with entities, attributes, relationships), Gantt Charts (project timelines, task dependencies), Pie Charts (data distribution percentages), Git Graphs (branch visualization, commit history), User Journey (customer experience mapping), C4 Diagrams (system architecture contexts), Mindmaps (hierarchical idea organization), and Timeline (chronological events). Each diagram type uses specific syntax: flowchart uses graph TD or LR, sequence uses participant and arrows (->>, -->>), class uses class keyword with methods/attributes. The viewer renders all types with proper shapes, colors, and connectors following Mermaid.js specification.
How does the viewer handle syntax errors in Mermaid code?
The viewer validates Mermaid syntax in real-time using the Mermaid.js parser. Common errors detected include: invalid diagram type declarations (typo in "flowchart"), unclosed brackets or quotes in node labels, incorrect arrow syntax (-> vs -->), invalid node IDs (spaces in IDs without quotes), and malformed subgraph declarations. Error messages display below the code editor with the specific line number and error description like "Parse error on line 5: Expecting 'SEMI', 'NEWLINE', got 'ARROW'". The viewer highlights the problematic line in red and suggests corrections. For example, if you write "A -> B" in a flowchart (missing second dash), it suggests using "A --> B". Syntax validation prevents rendering broken diagrams and helps users learn correct Mermaid syntax. The viewer includes example templates for each diagram type, providing working syntax references for beginners.
Can I customize diagram appearance like colors, fonts, and themes?
Yes. Mermaid supports theming and styling through configuration directives. Use %%{init: {'theme':'dark'}}%% to switch themes (default, dark, forest, neutral). Individual node styling uses style directives: "style nodeId fill:#f9f,stroke:#333,stroke-width:4px". Class-based styling applies to multiple nodes: "classDef errorClass fill:#f66,stroke:#f00" then "class node1,node2 errorClass". Font customization uses fontFamily and fontSize in theme config. The viewer supports all Mermaid themes and custom CSS styling. For flowcharts, you can style specific node types (rectangles, diamonds, circles) differently. Sequence diagrams support actor box colors and message line styles (solid, dotted, thick). This customization is essential for creating branded diagrams matching company style guides or highlighting critical paths in red for documentation and presentations.