diagram-design
cathrynlavery/diagram-designA diagram skill that writes 45 diagram types as one self-contained HTML and SVG file in your brand, with onboarding, import and PNG export.
Recommended
Check first Depth 4/5
Mermaid Architect (design-doc-mermaid) Claude skill
A Mermaid diagram and design-doc skill with a 23 KB router, 11 document templates, guides and scripts to validate and render diagrams with mermaid-cli.
Our verdict Recommended with caveats
A solid, scripted Mermaid workflow, but there is no license file and the SKILL.md is large and heavily structured.
What Mermaid Architect (design-doc-mermaid) does
design-doc-mermaid helps an agent turn text or source code into Mermaid diagrams and design documents. A 23 KB SKILL.md works as a decision tree: it works out what you want (flowchart, sequence, class, ER, state, C4 or architecture diagram, or a full design doc), loads the matching guide, and fills a template. The assets folder has templates for API, architecture, database, feature and system design documents. A reference set includes a Mermaid diagram guide, a resilient-workflow guide, troubleshooting, and a guide for GitHub wiki, WikiTicket and Confluence publishing that favors diagrams GitHub renders safely. The skill also prescribes high-contrast styling and Unicode semantic symbols.
Three Python scripts back it up. extract_mermaid.py pulls diagrams out of markdown and can validate them by rendering with mmdc, mermaid_to_image.py renders diagrams to image files, and resilient_diagram.py supports a fallback workflow. The mmdc commands run locally through subprocess, and the scripts make no network calls that we found. Example folders show output for FastAPI, Java, Node, Python ETL, React and Spring Boot projects. The repo has a plugin manifest, no CI and no evals, and the dossier shows no license, so reuse rights are unclear.
Good for
- Generating architecture and sequence diagrams from code or descriptions
- Design docs that must render in GitHub wikis
- Teams that want diagrams validated before commit
Not for
- Polished presentation graphics, where a dedicated diagram design skill fits better
- Projects that cannot install mermaid-cli
What's inside depth 3/5
A 23 KB SKILL.md with 6 reference files, 11 templates and 3 scripts, but no tests or evals.
- Skills
- 1
- Reference docs
- 6
- Scripts
- 3
- Tests / evals
- 0
- Templates
- 11
- Avg SKILL.md
- 22.3 KB
Counted from the repository file tree. How we score depth.
Dependencies and costs
- mermaid-cli (mmdc) for rendering and validation
- Python 3 for the scripts
Security review
Review before installingA Mermaid diagram skill for design docs with templates, examples and three small Python helpers that extract diagrams from markdown and render them to PNG/SVG through the locally installed mermaid-cli. The scripts make no network requests and use no allowed-tools pre-approvals or hooks. You need to install mermaid-cli yourself for the image-export step.
Worth knowing
- Relies on a CLI or package we could not reviewRendering requires mermaid-cli (
npm install -g @mermaid-js/mermaid-cli, which runs a headless Chromium); the scripts only call it if already installed.scripts/resilient_diagram.py:410
What we checked
The repository (29 files) on Oct 29, 2026. Not a full review: it relies on code outside the repository: npm package @mermaid-js/mermaid-cli (mmdc) and its bundled Chromium, installed by the user separately.
NVIDIA SkillSpector static scan: 35 pattern hits (analysis-evasion 9, Privilege Escalation 7, Data Exfiltration 6, Dangerous Code Execution 6, Tool Misuse 4, Agent Snooping 2). Hits are example API/auth snippets in design-doc templates (curl to api.example.com, password_hash columns, sample tokens) and emoji in diagram guides; none is executed. The subprocess calls are the mmdc invocations noted above.
A review, not a certification. Skills change after we check them — read the files before installing.
License
No license file or license metadata found — all rights reserved by default.
Can it run unattended?
Not really. It generates and validates diagrams on request; the validation step is optional and there is no long-running loop.
Alternatives to Mermaid Architect (design-doc-mermaid)
drawio-skill
Agents365-ai/drawio-skillSkill that turns natural language, Terraform, SQL, OpenAPI and other sources into editable draw.io diagrams, with incremental sync, drift detection and CI tests.
Recommended
Broad access Depth 4/5
Archify
tt-a1i/archifyA skill that turns a description or a codebase into a validated, interactive standalone HTML diagram or one-page explainer.
Recommended
Check first Depth 5/5
FAQ
What is design-doc-mermaid?
It is a Claude Code skill, also called Mermaid Architect, that creates Mermaid diagrams and design documents from text or code. It ships templates, guides and scripts that validate and render diagrams.
How do I install design-doc-mermaid?
Clone the repository into ~/.claude/skills, or install it through the Skilz marketplace with skilz install SpillwaveSolutions_design-doc-mermaid/design-doc-mermaid. Validation and image export also need mermaid-cli installed.
Does it work with GitHub wikis?
Yes, the skill defaults to GitHub-safe Mermaid and has a guide for GitHub wiki, WikiTicket and Confluence output. It advises using flowcharts where GitHub's C4 rendering is unreliable.
design-doc-mermaid vs diagram-design?
design-doc-mermaid focuses on Mermaid code, design-doc templates and validation. cathrynlavery/diagram-design focuses on the visual design of editorial diagrams. Pick by whether you need text-based diagrams in docs or polished visuals.
Sources: GitHub repository (stars, license, file tree, last push Aug 24, 2026); install counts from skills.sh via Best Skills (CC BY 4.0). Review based on the README and SKILL.md files as published.