Mermaid Visualizer

Convert text content into clean, professional Mermaid diagrams optimized for presentations and documentation, with automatic syntax error prevention for Obsidian and GitHub compatibility.

Key Benefits

• Transform text to professional Mermaid diagrams
• 6 diagram types: process flow, circular flow, comparison, mindmap, sequence, state
• Built-in syntax error prevention (avoids list conflicts, subgraph naming issues)
• Obsidian and GitHub compatible
• Configurable layouts (vertical/horizontal) and detail levels
• Professional color schemes with semantic meaning

Core Capabilities

• Diagram Types: Process flow (graph TB/LR), circular flow, comparison, mindmap, sequence, state diagrams
• Layout Options: Vertical (TB), horizontal (LR), right-to-left (RL), bottom-to-top (BT)
• Detail Levels: Simple (core only), standard (balanced), detailed (full annotations), presentation (slides)
• Styles: Minimal (monochrome), professional (semantic colors), colorful (vibrant), academic (formal)
• Syntax Protection: Automatic avoidance of Markdown list conflicts, proper subgraph ID syntax, correct node references

When to Use

• Visualizing concepts, processes, or workflows
• Creating flowcharts or decision trees
• Building system architecture diagrams
• Generating comparison or before/after diagrams
• User requests to "visualize", create "flowchart", "diagram", or "mindmap"

Critical Syntax Rules

Prevents common errors:

• Avoids "number. space" patterns that trigger Markdown list conflicts
• Uses proper subgraph naming: subgraph id["Display Name"]
• References subgraphs by ID, not display name
• Escapes special characters: " → 『』, () → 「」
• Applies correct arrow syntax (-->, -.->, ==>)

Configuration Options

• Layout: direction (TB/LR/RL/BT), aspect (portrait/landscape/square)
• Detail: simple/standard/detailed/presentation
• Style: minimal/professional/colorful/academic
• Additional: show_legend, numbered steps, custom title

Workflow

1. Analyze content structure and relationships
2. Select appropriate diagram type
3. Choose configuration (or use defaults)
4. Generate syntactically correct Mermaid code
5. Output in markdown code fence with explanation

Color Scheme

• Green: Input, perception, start states
• Red: Planning, decision points
• Purple: Processing, reasoning
• Orange: Actions, tool usage
• Cyan: Output, execution, results
• Yellow: Storage, memory, data
• Pink: Learning, optimization
• Blue: Metadata, definitions

Source: https://github.com/axtonliu/axton-obsidian-visual-skills/tree/main/mermaid-visualizer License: Check repository for details

Related: Excalidraw Diagram Skill and Obsidian Canvas Creator Skill. Hub: skills.