Generating Documentation
ancoleman/ai-design-components
Generate comprehensive technical documentation including API docs (OpenAPI/Swagger), code documentation (TypeDoc/Sphinx), documentation sites (Docusaurus/MkDocs), Architecture Decision Records…
Create Mermaid diagrams (flowchart, sequence, class, ER, state, C4, architecture) from text or source code.
Install Design Doc Mermaid
$ npx skills add SpillwaveSolutions/design-doc-mermaid --skill design-doc-mermaid -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install SpillwaveSolutions/design-doc-mermaid design-doc-mermaid --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
Claude Code skills documentation · loads skills from .claude/skills/
Install the "design-doc-mermaid" agent skill from https://github.com/SpillwaveSolutions/design-doc-mermaid/tree/main into .claude/skills/design-doc-mermaid/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-doc-mermaid", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add SpillwaveSolutions/design-doc-mermaid --skill design-doc-mermaid -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install SpillwaveSolutions/design-doc-mermaid design-doc-mermaid --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "design-doc-mermaid" agent skill from https://github.com/SpillwaveSolutions/design-doc-mermaid/tree/main into .agents/skills/design-doc-mermaid/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-doc-mermaid", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add SpillwaveSolutions/design-doc-mermaid --skill design-doc-mermaid -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install SpillwaveSolutions/design-doc-mermaid design-doc-mermaid --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "design-doc-mermaid" agent skill from https://github.com/SpillwaveSolutions/design-doc-mermaid/tree/main into .cursor/skills/design-doc-mermaid/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-doc-mermaid", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add SpillwaveSolutions/design-doc-mermaid --skill design-doc-mermaid -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install SpillwaveSolutions/design-doc-mermaid design-doc-mermaid --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "design-doc-mermaid" agent skill from https://github.com/SpillwaveSolutions/design-doc-mermaid/tree/main into .gemini/skills/design-doc-mermaid/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-doc-mermaid", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install SpillwaveSolutions/design-doc-mermaid design-doc-mermaidInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add SpillwaveSolutions/design-doc-mermaid --skill design-doc-mermaid -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "design-doc-mermaid" agent skill from https://github.com/SpillwaveSolutions/design-doc-mermaid/tree/main into .github/skills/design-doc-mermaid/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-doc-mermaid", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add SpillwaveSolutions/design-doc-mermaid --skill design-doc-mermaid -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install SpillwaveSolutions/design-doc-mermaid design-doc-mermaid --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "design-doc-mermaid" agent skill from https://github.com/SpillwaveSolutions/design-doc-mermaid/tree/main into .opencode/skills/design-doc-mermaid/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-doc-mermaid", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
design-doc-mermaid- GitHub stars
- 176
- Used in
- 1 other repo
- Token cost
- ~5.6k tokens
- SKILL.md length
- 1,367 words
- Files
- 37 (incl. scripts, references, assets)
- Skills in repo
- 1
- Repo updated
- First seen
- Licence
- None found
At a glance
Create Mermaid diagrams (flowchart, sequence, class, ER, state, C4, architecture) from text or source code.
- Works in 4 steps: User makes a request → Skill analyzes… → Skill determines diagram/document type →… → AI reads specialized guide → Generates… → …
- Asked to create a diagram
- SKILL.md covers Table of Contents, Decision Tree, Available Guides and Resources and GitHub wiki, WikiTicket, and…, plus 5 more sections
- Calls python
What it does
Design Doc Mermaid is an agent skill from SpillwaveSolutions/design-doc-mermaid. Create Mermaid diagrams (flowchart, sequence, class, ER, state, C4, architecture) from text or source code. Default for GitHub wiki. Use when asked to create a diagram, generate mermaid, document architecture, or convert code to diagram. PlantUML is only for leftover types. Confluence needs PNG/SVG as well as the fence.
Its SKILL.md is about 5.6k tokens, which your agent loads only when the skill is triggered. The skill folder holds 43 other files, including scripts, reference files and assets (for example `.claude-plugin/plugin.json`, `HIGH_CONTRAST_UPDATE.md` and `README.md`).
It sits in Development, covering Diagrams and Architecture decision records. It works with Mermaid, GitHub, Confluence and Python. The repository describes itself as: design-doc-mermaid Claude Skill.
When your agent uses it
- Asked to create a diagram
- Generate mermaid
- Document architecture
- Convert code to diagram
Example prompts
- “/design-doc-mermaid”
Requirements
- Python 3
Workflow steps
4 steps, taken from the first numbered list in SKILL.md.
- User makes a request → Skill analyzes intent
- Skill determines diagram/document type → Loads appropriate guide(s)
- AI reads specialized guide → Generates diagram/document using templates
- Result delivered → With validation and export options
What it can do on your machine
Read from SKILL.md and the folder at commit c36d835. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Ships 1 file in scripts/, which the agent can run.
Shell commands in SKILL.md call:
python
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Design Doc Mermaid loads about 5.6k tokens when it runs, and up to ~52k if it reads all its reference files. Until then it costs about 85 tokens; SKILL.md has 1,367 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.
SKILL.md
Without a licence we can't republish the file, so here is its outline and opening line. It has 1,367 words (~5,591 tokens).
“Mermaid diagram and documentation system with specialized guides and code-to-diagram capabilities.”
- name
- design-doc-mermaid
Files
SKILL.md and 36 other files (scripts, references, assets) in the repository root of SpillwaveSolutions/design-doc-mermaid.
- SKILL.md
- .claude-plugin/plugin.json
- .gitignore
- HIGH_CONTRAST_UPDATE.md
- README.md
- assets/api-design-template.md
- assets/architecture-design-template.md
- assets/database-design-template.md
- assets/feature-design-template.md
- assets/system-design-template.md
- examples/fastapi/README.md
- examples/java-webapp/README.md
- examples/node-webapp/README.md
- examples/python-etl/README.md
- … and 23 more
Open the folder on GitHubat commit c36d835
Used in 1 other repository
We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in SpillwaveSolutions/design-doc-mermaid, which our catalogue first saw on October 7, 2026.
Compare with similar skills
Design Doc Mermaid next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Design Doc Mermaid this skillSpillwaveSolutions/design-doc-mermaid | 176 | 1 repos | ~5.6k | Automated safety check: Pass | None | |
| Generating Documentationancoleman/ai-design-components | 525 | — | ~3k | Automated safety check: Pass | MIT | |
| GitDiagram Repository Overviewahmedkhaleel2004/gitdiagram | 18k | — | ~427 | Automated safety check: Pass | MIT | |
| Code Graph Mermaid Diagramstrailofbits/skills | 7.5k | — | ~1.7k | Automated safety check: Pass | CC-BY-SA-4.0 | |
| GitDiagram Repo Architectureahmedkhaleel2004/gitdiagram | 18k | — | ~429 | Automated safety check: Pass | MIT | |
| Markdown Mermaid Writingneflibata-feng/MyArxiv-Agent | 126 | 5 repos | ~3.8k | Automated safety check: Notes | Apache-2.0 |
Similar skills
GitDiagram Repository Overview
ahmedkhaleel2004/gitdiagram
Explains the architecture of a public GitHub repository through GitDiagram: how the code is organized, the main components with paths, and a Mermaid diagram.
- Official
Code Graph Mermaid Diagrams
trailofbits/skills
Generates Mermaid diagrams from Trailmark code graphs, including call graphs, class hierarchies, module dependency maps, complexity heatmaps and attack surface data flows.
GitDiagram Repo Architecture
ahmedkhaleel2004/gitdiagram
Explains how a public GitHub repository is built by fetching its GitDiagram architecture diagram, components and optional explainer video.
Markdown Mermaid Writing
neflibata-feng/MyArxiv-Agent
Comprehensive markdown and Mermaid diagram writing skill that establishes text-based diagrams as the DEFAULT documentation standard.
Deep Repository Architecture Analyzer
yzddmr6/repo-analyzer
Produces an in-depth architecture report on an open-source project or framework, explaining why it is designed the way it is rather than just what the code does.
Related
Works with
Categories
Questions about Design Doc Mermaid
What does Design Doc Mermaid do?
Create Mermaid diagrams (flowchart, sequence, class, ER, state, C4, architecture) from text or source code. Design Doc Mermaid is an agent skill from SpillwaveSolutions/design-doc-mermaid. Create Mermaid diagrams (flowchart, sequence, class, ER, state, C4, architecture) from text or source code.
When should I use Design Doc Mermaid?
Design Doc Mermaid fits situations like: asked to create a diagram; generate mermaid; document architecture; convert code to diagram.
How do I install Design Doc Mermaid in Claude Code?
Run `npx skills add SpillwaveSolutions/design-doc-mermaid --skill design-doc-mermaid -a claude-code`. Or copy the skill folder (the SpillwaveSolutions/design-doc-mermaid repository) into .claude/skills/design-doc-mermaid in your project. Claude Code loads it when a task matches its description.
How do I install Design Doc Mermaid in Codex?
Run `npx skills add SpillwaveSolutions/design-doc-mermaid --skill design-doc-mermaid -a codex`. Or copy the skill folder (the SpillwaveSolutions/design-doc-mermaid repository) into .agents/skills/design-doc-mermaid in your project. Codex loads it when a task matches its description.
Can I use Design Doc Mermaid in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add SpillwaveSolutions/design-doc-mermaid --skill design-doc-mermaid -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/design-doc-mermaid, .gemini/skills/design-doc-mermaid, .github/skills/design-doc-mermaid and .opencode/skills/design-doc-mermaid in your project.
What does Design Doc Mermaid need to run?
Going by SKILL.md and its folder, Design Doc Mermaid needs the command-line tools its instructions call (python). Our summary lists: Python 3.
Does Design Doc Mermaid access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Design Doc Mermaid safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
What licence does Design Doc Mermaid use?
No licence was found for Design Doc Mermaid or its repository. Without one, default copyright applies: ask the author before reusing or redistributing it.
How many tokens does Design Doc Mermaid use?
About 5.6k tokens (SKILL.md is roughly 22k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 46k tokens, read only when the agent opens those files.
What are the alternatives to Design Doc Mermaid?
Skills that share tags, products or a category with Design Doc Mermaid: Generating Documentation (ancoleman/ai-design-components, 525 stars), GitDiagram Repository Overview (ahmedkhaleel2004/gitdiagram, 18k stars), Code Graph Mermaid Diagrams (trailofbits/skills, 7.5k stars) and GitDiagram Repo Architecture (ahmedkhaleel2004/gitdiagram, 18k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Design Doc Mermaid?
SpillwaveSolutions (a GitHub organization) maintains it in SpillwaveSolutions/design-doc-mermaid, which has 176 GitHub stars. The repository was last updated on August 24, 2026.
Source: SpillwaveSolutions/design-doc-mermaid on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.