mermaid-diagrams
Use the mermaid-diagrams skill whenever you are creating or updating mermaid diagrams. Provides guidance on mermaid best practices.
- Installs
- 121
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/sammcj/agentic-coding --skill mermaid-diagrams- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads mermaid-diagrams automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Mermaid Diagramming Guidelines
- Wrap any label containing parentheses or other special characters in double quotes, e.g.
id1["Send request (POST)"]; unquoted parentheses break parsing - Use
<br>instead of\nfor line breaks - Mermaid does not support unordered lists within item labels
- For flowchart, state and class diagrams, apply this colour theme unless specified otherwise:
classDef inputOutput fill:#F5F5F5,stroke:#9E9E9E,color:#616161
classDef llm fill:#E8EAF6,stroke:#7986CB,color:#3F51B5
classDef components fill:#F3E5F5,stroke:#BA68C8,color:#8E24AA
classDef process fill:#E0F2F1,stroke:#4DB6AC,color:#00897B
classDef stop fill:#FFEBEE,stroke:#E57373,color:#D32F2F
classDef data fill:#E3F2FD,stroke:#64B5F6,color:#1976D2
classDef decision fill:#FFF3E0,stroke:#FFB74D,color:#F57C00
classDef storage fill:#F1F8E9,stroke:#9CCC65,color:#689F38
classDef api fill:#FFF9C4,stroke:#FDD835,color:#F9A825
classDef error fill:#FFCDD2,stroke:#EF5350,color:#C62828
FAQ
What does the mermaid-diagrams skill do?
Use the mermaid-diagrams skill whenever you are creating or updating mermaid diagrams. Provides guidance on mermaid best practices.
How do I install mermaid-diagrams?
Run npx skills add https://github.com/sammcj/agentic-coding --skill mermaid-diagrams in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/mermaid-diagrams/ (personal) or .claude/skills/mermaid-diagrams/ (project).
Which AI agents can use mermaid-diagrams?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is mermaid-diagrams safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains mermaid-diagrams?
It is published by sammcj in sammcj/agentic-coding. It has 121 recorded installs.
More from sammcj/agentic-coding
critical-thinking-logical-reasoning
sammcj/agentic-coding
Critically analyse the reasoning in written content (articles, blogs, transcripts, reports), not code. Use only when explicitly asked to critically analyse or critique an argument.
writing-documentation-with-diataxis
sammcj/agentic-coding
Applies the Diataxis framework to create or improve technical documentation. Use when being asked to write high quality tutorials, how-to guides, reference docs, or explanations, when reviewing documentation quality, or when deciding what type of documentation to create. Helps identify documentation types using the action/cognition and acquisition/application dimensions.
creating-development-plans
sammcj/agentic-coding
Creates structured development plans with phased task breakdowns, requirements, and QA checklists. Use when the user explicitly asks to create a dev plan, development plan, or document development requirements.
ghostty-config
sammcj/agentic-coding
Use when creating, editing or debugging Ghostty terminal configuration - config.ghostty files, config option names and their valid values, keybinds and key sequences, themes, fonts, shell integration, or ghostty + CLI actions. Covers macOS and Linux/GTK differences.
code-simplification
sammcj/agentic-coding
Use this skill when you need to review and refactor code to make it simpler, more maintainable, and easier to understand. Helps with identifying overly complex solutions, unnecessary abstractions.
prompt-enhancer
sammcj/agentic-coding
Transform poor or overly simple prompts with expert-level framing. Use when the user explicitly asks to improve, refine, or rewrite a prompt, or wants help framing a request for another AI system. Do NOT use for authoring, reviewing, or migrating system prompts or skills targeting a specific Claude model.
Popular docs & writing skills
grill-with-docs
mattpocock/skills
A relentless interview to sharpen a plan or design, which also creates docs (ADR's and glossary) as we go.
lark-markdown
open.feishu.cn
飞书 Markdown：查看、创建、上传、编辑和比较飞书中的原生 Markdown 文件。当用户要操作飞书 Markdown 文件，或比较其远端版本及本地草稿时使用。纯本地 Markdown 文件操作不触发本 skill。不负责将 Markdown 导入为飞书在线文档，也不负责文件搜索、权限、评论、移动、删除等云空间管理操作。
writing-beats
mattpocock/skills
Writing, exploit; assemble raw material into a journey of beats, grounding each term before a beat leans on it.
writing-shape
mattpocock/skills
Writing, exploit: shape raw material into an article, paragraph by paragraph.
writing-fragments
mattpocock/skills
Writing, explore: mine raw fragments, no structure yet.
writing-for-agents
mattpocock/skills
Writing documents for agents. Use when creating or editing skills, or modifying AGENTS.md or CLAUDE.md.