Create syntax-verified Mermaid architecture diagrams for systems and dependency flows.
npx skills add https://github.com/bex-co/beancount-io --skill mermaid-bex-co
Please help me install this Agent Skill. Skill: mermaid Source: https://github.com/bex-co/beancount-io/tree/main/.agents/skills/mermaid Command: npx skills add https://github.com/bex-co/beancount-io --skill mermaid-bex-co
@mermaid-js/mermaid-cli before being returned, so broken syntax never reaches the user. - Architecture Conventions: Enforces consistent notation — boxes for services, cylinders for datastores, triangles for humans, arrows showing dependency direction, and subgraphs for real boundaries like clusters or trust zones. - Repo-Grounded Diagrams: When diagramming the current repository, it reads AGENTS.md, package docs, and ADRs first instead of guessing. - Use Case: Ask for a diagram of your deployment pipeline, and receive a verified Mermaid flowchart showing services, datastores, and dependency edges that renders correctly in any Markdown viewer. ## Quick Start Ask the agent to draw a Mermaid architecture diagram of a specific component or system, for example: diagram the request flow between the web app, API, and database.High-intent search queries and answers about installing and using this skill.
Describe the component or system you want diagrammed and the Skill reads the repo's AGENTS.md, package docs, and ADRs first, then produces a verified Mermaid flowchart. Boxes represent services, cylinders datastores, and arrows show dependency direction.
Write the diagram body to a .mmd file and run npx -y @mermaid-js/[email protected] -i file.mmd -o file.svg. An exit code of 0 confirms the syntax is valid; parse errors indicate what to fix.
Common causes are unquoted labels containing parentheses, brackets, or arrow-like text, naming a node bare 'end' or 'graph', and subgraph titles with spaces lacking quotes. Quote such labels and titles to fix parsing.
Use flowchart TB (top-bottom) by default, switching to LR only when the graph is much wider than deep. Use subgraphs only for real boundaries like clusters, networks, or trust zones, and label edges only when the relationship is not obvious.
Yes, but never draw a manual procedure as a peer box of running infrastructure. Give runbook or recovery flows their own subgraph whose title states it is manual and where it runs, with the human actor drawn as a triangle inside.
2lab-aiExplore codebases read-only to map architecture, dependencies, and knowledge gaps.
gotgenesDetect Mermaid diagram syntax pitfalls and guide correct rendering.
CuriousLearnerDocument system architecture and technical decisions with diagrams and ADRs.
davistroyConvert BPMN 2.0 XML diagrams into Draw.io .drawio format.