OverviewHistoryStatsSecurity
npx skills add ...
Documentation
SKILL.md
npx skills add axtonliu/axton-obsidian-visual-skills --skill mermaid-visualizer
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.
npx skills add axtonliu/axton-obsidian-visual-skills --skill mermaid-visualizer
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.
When creating a Mermaid diagram:
Default assumptions:
Best for: Workflows, decision trees, sequential processes, AI agent architectures
Use when: Content describes steps, stages, or a sequence of actions
Key features:
Configuration options:
layout: "vertical" (TB), "horizontal" (LR)detail: "simple" (core steps only), "standard" (with descriptions), "detailed" (with annotations)style: "minimal", "professional", "colorful"Best for: Cyclic processes, continuous improvement loops, agent feedback systems
Use when: Content emphasizes iteration, feedback, or circular relationships
Key features:
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:
Best for: Hierarchical concepts, knowledge organization, topic breakdowns
Use when: Content is hierarchical with clear parent-child relationships
Key features:
Best for: Interactions between components, API calls, message flows
Use when: Content involves communication between actors/systems over time
Key features:
Best for: System states, status transitions, lifecycle stages
Use when: Content describes states and transitions between them
Key features:
Always follow these rules to prevent parsing errors:
--> solid arrow-.-> dashed arrow (for supporting systems, optional paths)==> thick arrow (for emphasis)~~~ invisible link (for layout only)For complete syntax reference and edge cases, see references/syntax-rules.md
All diagrams accept these parameters:
Layout:
direction: "vertical" (TB), "horizontal" (LR), "right-to-left" (RL), "bottom-to-top" (BT)aspect: "portrait" (default), "landscape" (wide), "square"Detail Level:
simple: Core elements only, minimal labelsstandard: Balanced detail with key descriptions (default)detailed: Full annotations, explanations, and metadatapresentation: Optimized for slides (larger text, fewer details)Style:
minimal: Monochrome, clean linesprofessional: Semantic colors, clear hierarchy (default)colorful: Vibrant colors, high contrastacademic: Formal styling for papers/documentationAdditional Options:
show_legend: true/false - Include color/symbol legendnumbered: true/false - Add sequence numbers to stepstitle: string - Add diagram titlePattern 1: Basic request
Pattern 2: With configuration
Pattern 3: Comparison
Understand the content
Select diagram type
Choose configuration
Generate Mermaid code
Output with context
Standard professional palette:
Before outputting, verify:
For detailed syntax rules and troubleshooting, see:
✅ 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))User: "Visualize the software development lifecycle"
Response: [Analyze → Choose graph TB → Generate with standard detail]User: "Create a horizontal flowchart of our sales process with lots of detail"
Response: [Analyze → Choose graph LR → Generate with detailed level]User: "Compare traditional AI vs AI agents"
Response: [Analyze → Choose comparison layout → Generate with contrasting styles]graph TB
subgraph core["Core Process"]
A --> B --> C
end
subgraph support["Supporting Systems"]
D
E
end
core -.-> supportgraph TB
A[Start] --> B[Process]
B --> C[End]
C -.->|Feedback| Agraph TB
Central[Hub]
A[Spoke 1] --> Central
B[Spoke 2] --> Central
C[Spoke 3] --> Central