Mermaid Visualizer
Converts text into syntactically correct Mermaid diagrams without the usual markdown parsing headaches. Handles flowcharts, mindmaps, sequence diagrams, and comparison layouts with built-in error prevention for the stuff that always breaks: numbered list conflicts, subgraph naming, and special characters. Ships with sensible defaults like vertical layout and professional colors, but you can configure detail level, direction, and styling. The syntax rules section is genuinely useful since it shows you exactly how to avoid the "1. Text" parsing error and other common gotchas. Works across Obsidian, GitHub, and other Mermaid renderers. Good for turning meeting notes or architecture descriptions into presentation-ready diagrams fast.
- skills.sh installs
- 1.7K
- GitHub stars
- 3.7K
- last updated
- Aug 21, 2026
Install
$ npx -y skills add axtonliu/axton-obsidian-visual-skills --skill mermaid-visualizer --agent claude-codeInstalls into .claude/skills of the current project.
Files
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
- Generate diagram - Create syntactically correct Mermaid code
- Output in markdown - Wrap in proper code fence with optional explanation
Default assumptions:
- Vertical layout (TB) unless horizontal requested
- Medium detail level (balanced between simplicity and information)
- Professional color scheme with semantic colors
- Obsidian/GitHub compatible syntax
Diagram Types
1. Process Flow (graph TB/LR)
Best for: Workflows, decision trees, sequential processes, AI agent architectures
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/axtonliu/axton-obsidian-visual-skills
- Categories
- Documentation, Debugging, Design & UI/UX, Office & Documents
- First seen
- Apr 16, 2026
More from axtonliu/axton-obsidian-visual-skills
All 3Recommended
More Documentation
ticket-deflectoranthropics/knowledge-work-pluginsReads a forwarded customer email or ticket, pulls order/refund status from PayPal and account history from HubSpot, drafts a tone-matched reply in the owner's w1.7Kskills.sh installs
ui-design-systemdavila7/claude-code-templatesUI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handof1.7Kskills.sh installs
mongodbhoodini/ai-agents-skillsWork with MongoDB databases using best practices. Use when designing schemas, writing queries, building aggregation pipelines, or optimizing performance. Trigge1.7Kskills.sh installs
building-with-llmsrefoundai/lenny-skillsHelp users build effective AI applications. Use when someone is building with LLMs, writing prompts, designing AI features, implementing RAG, creating agents, r1.7Kskills.sh installs
press-and-preronred/aso-skillsWhen the user wants to get press coverage, media mentions, or editorial features for their app — including writing press releases, pitching journalists, getting1.7Kskills.sh installssmb-routeranthropics/knowledge-work-pluginsThe front door to the Small Business plugin. Listens to what the owner needs right now — vague or specific — and routes them to the best skill or slash command 1.7Kskills.sh installs