Generates Mermaid diagrams from text for flowcharts, mindmaps, architectures, and sequences. Handles syntax errors for clean rendering in GitHub, Obsidian, and docs.
npx claudepluginhub axtonliu/axton-obsidian-visual-skills --plugin obsidian-visual-skillsThis skill uses the workspace's default tool permissions.
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.
Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).
Generates original PNG/PDF visual art via design philosophy manifestos for posters, graphics, and static designs on user request.
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:
❌ 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
❌ 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
❌ WRONG: Title --> AI Agent Core → Reference display name directly
✅ RIGHT: Title --> agent → Reference subgraph ID
✅ 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))
--> 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
User: "Visualize the software development lifecycle"
Response: [Analyze → Choose graph TB → Generate with standard detail]
Pattern 2: With configuration
User: "Create a horizontal flowchart of our sales process with lots of detail"
Response: [Analyze → Choose graph LR → Generate with detailed level]
Pattern 3: Comparison
User: "Compare traditional AI vs AI agents"
Response: [Analyze → Choose comparison layout → Generate with contrasting styles]
Understand the content
Select diagram type
Choose configuration
Generate Mermaid code
Output with context
Standard professional palette:
graph TB
subgraph core["Core Process"]
A --> B --> C
end
subgraph support["Supporting Systems"]
D
E
end
core -.-> support
graph TB
A[Start] --> B[Process]
B --> C[End]
C -.->|Feedback| A
graph TB
Central[Hub]
A[Spoke 1] --> Central
B[Spoke 2] --> Central
C[Spoke 3] --> Central
Before outputting, verify:
For detailed syntax rules and troubleshooting, see: