Generate Mermaid Diagrams from JSON

Mermaid diagrams are a great way to communicate data structures, timelines, and relationships in documentation, wikis, and README files. DataLensia can generate them automatically from any JSON input — no diagram syntax knowledge required.

🚩 The Scenario

You have a JSON API response documenting a project structure:

{
  "project": "DataLensia",
  "phases": [
    { "name": "Research", "start": "2025-01-01", "end": "2025-01-15", "status": "done" },
    { "name": "Design", "start": "2025-01-16", "end": "2025-02-01", "status": "done" },
    { "name": "Development", "start": "2025-02-02", "end": "2025-04-01", "status": "active" },
    { "name": "Launch", "start": "2025-04-15", "end": "2025-04-30", "status": "pending" }
  ]
}

You want a Gantt chart and a flowchart for your documentation.

🛠️ Step-by-Step

1. Open the Mermaid Visualizer.
2. Paste your JSON into the left panel.
3. Select a Diagram Type from the top selector.
4. The diagram renders live in the right panel.
5. Adjust settings like direction, depth limit, and theme.
6. Click Export to download as SVG or PNG.

📊 Diagram Types Reference

Diagram	Best For	Key Setting
Flowchart	Hierarchical structure, navigation maps	Direction: TD / LR
Class Diagram	Object types and properties	Depth limit
Mind Map	Exploring nested hierarchies at a glance	Depth limit
ER Diagram	Relationships between entities	—
Sequence Diagram	Interaction flows between actors	—
Gantt Chart	Project phases with dates	Date fields
Timeline	Chronological events	Date fields
Pie Chart	Numeric distributions	Value field
State Diagram	Status transitions	—
User Journey	UX flows with satisfaction scores	Score field

🎛️ Diagram Settings

Direction (for Flowchart):

• TD — Top-Down (default)
• LR — Left-Right (better for wide trees)
• RL — Right-Left
• BT — Bottom-Top

Depth Limit: Controls how many levels of nesting to include. Useful for very deep JSON — start at depth 3 and increase if needed.

Theme: Match your documentation's style — default, dark, forest, neutral.

📄 Using Mermaid in Documentation

The generated Mermaid syntax can be copied and pasted directly into:

• GitHub Markdown — GitHub renders Mermaid in .md files natively.
• Notion — Use the /mermaid block.
• Obsidian — Supports Mermaid in code blocks.
• Confluence — With the Mermaid plugin.
• Any Markdown renderer that supports Mermaid.

Example output for the project JSON above (Gantt):

```mermaid
gantt
    title DataLensia Project
    dateFormat YYYY-MM-DD
    section Phases
    Research :done, 2025-01-01, 2025-01-15
    Design :done, 2025-01-16, 2025-02-01
    Development :active, 2025-02-02, 2025-04-01
    Launch : 2025-04-15, 2025-04-30
```

💡 Tips for Better Diagrams

• Too many nodes? Reduce the depth limit or filter your JSON first with the Transform Builder to keep only relevant fields.
• SVG vs PNG: Use SVG for documentation (scales perfectly), PNG for presentations and slides.
• Class diagrams work best on flat objects where each key has a defined type — not deeply nested arrays.
• Mind maps are ideal for exploring an unfamiliar API response at a high level.

🔗 Combine with Flow Diagram

For interactive exploration (zooming, panning, searching nodes), use the Flow Diagram instead. For static documentation export, Mermaid is the better choice.

---

🚀 Try it now

Paste any JSON into the Mermaid Visualizer and select Mind Map for an instant overview of its structure.