Transform text content into professional Mermaid diagrams for presentations and documentation. Use when users ask to visualize concepts, create flowcharts, or make diagrams from text. Supports process flows, system architectures, comparisons, mindmaps, and more with built-in syntax error prevention.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
Transform text content into professional Mermaid diagrams for presentations and documentation. Use when users ask to visualize concepts, create flowcharts, or make diagrams from text. Supports process flows, system architectures, comparisons, mindmaps, and more with built-in syntax error prevention.
Mermaid Visualizer
Overview
Convert text content into clean, professional Mermaid diagrams optimized for presentations and documentation. Automatically handles common syntax pitfalls (list syntax conflicts, subgraph naming, spacing issues) to ensure diagrams render correctly in Obsidian, GitHub, and other Mermaid-compatible platforms.
Quick Start
When creating a Mermaid diagram:
Analyze the content - Identify key concepts, relationships, and flow
Choose diagram type - Select the most appropriate visualization (see Diagram Types below)
Select configuration - Determine layout, detail level, and styling
Best for: Cyclic processes, continuous improvement loops, agent feedback systems
Use when: Content emphasizes iteration, feedback, or circular relationships
Key features:
Central hub with radiating elements
Curved feedback arrows
Clear cycle indicators
3. Comparison Diagram (graph TB with parallel paths)
Best for: Before/after comparisons, A vs B analysis, traditional vs modern systems
Use when: Content contrasts two or more approaches or systems
Key features:
Side-by-side layout
Central comparison node
Clear differentiation via color/style
4. Mindmap
Best for: Hierarchical concepts, knowledge organization, topic breakdowns
Use when: Content is hierarchical with clear parent-child relationships
Key features:
Radial tree structure
Multiple levels of nesting
Clean visual hierarchy
5. Sequence Diagram
Best for: Interactions between components, API calls, message flows
Use when: Content involves communication between actors/systems over time
Key features:
Timeline-based layout
Clear actor separation
Activation boxes for processes
6. State Diagram
Best for: System states, status transitions, lifecycle stages
Use when: Content describes states and transitions between them
Key features:
Clear state nodes
Labeled transitions
Start and end states
Critical Syntax Rules
Always follow these rules to prevent parsing errors:
Rule 1: Avoid List Syntax Conflicts
❌ WRONG: [1. Perception] → Triggers "Unsupported markdown: list"
✅ RIGHT: [1.Perception] → Remove space after period
✅ RIGHT: [① Perception] → Use circled numbers (①②③④⑤⑥⑦⑧⑨⑩)
✅ RIGHT: [(1) Perception] → Use parentheses
✅ RIGHT: [Step 1: Perception] → Use "Step" prefix
Rule 2: Subgraph Naming
❌ WRONG: subgraph AI Agent Core → Space in name without quotes
✅ RIGHT: subgraph agent["AI Agent Core"] → Use ID with display name
✅ RIGHT: subgraph agent → Use simple ID only
Rule 3: Node References
❌ WRONG: Title --> AI Agent Core → Reference display name directly
✅ RIGHT: Title --> agent → Reference subgraph ID
Rule 4: Special Characters in Node Text
✅ Use quotes for text with spaces: ["Text with spaces"]
✅ Escape or avoid: quotation marks → use 『』instead
✅ Escape or avoid: parentheses → use 「」instead
✅ Line breaks in circle nodes only: ((Text<br/>Break))
