narumiruna/creating-mermaid-diagrams
skills/creating-mermaid-diagrams/SKILL.md
Use when creating or converting Mermaid diagrams, including flowcharts, sequence diagrams, ER diagrams, class diagrams, state diagrams, Gantt charts, and SVG exports.
$ install --global
skillsauthnpx skillsauth add narumiruna/agent-skills creating-mermaid-diagramsInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Jul 5, 2026, 5:44 AM145.6s82 files scanned
SKILL.md
- name:
- creating-mermaid-diagrams
- description:
- Use when creating or converting Mermaid diagrams, including flowcharts, sequence diagrams, ER diagrams, class diagrams, state diagrams, Gantt charts, and SVG exports.
Mermaid Creator
Create Mermaid source files for docs or slides, then export to SVG only when a rendered asset is needed.
Workflow
- Pick the diagram type that matches the structure.
- Write one focused
.mmdfile. - Validate or render with Mermaid CLI.
- Commit source
.mmd; commit SVG only when the consumer needs a static asset.
Diagram Type Selection
| Type | Use when | Reference | Example |
| --- | --- | --- | --- |
| Flowchart | processes, workflows, decisions | references/flowchart.md | assets/examples/flowchart/basic.mmd |
| Sequence | temporal system/API interactions | references/sequence.md | assets/examples/sequence/basic.mmd |
| Class | object models and relationships | references/class.md | assets/examples/class/basic.mmd |
| State | state machines and lifecycle states | references/state.md | assets/examples/state/basic.mmd |
| ER | database/entity relationships | references/er.md | assets/examples/er/basic.mmd |
| Other | Gantt, pie, git, journey, quadrant, timeline, mindmap, requirement, C4 | references/other-types.md | assets/examples/other/gantt-basic.mmd |
Load only the reference for the diagram type you are creating.
Mermaid CLI
mmdc -i diagram.mmd -o diagram.svg
mmdc -i diagram.mmd -o diagram.svg -t dark -b transparent
Useful flags:
-t: theme (default,dark,forest,neutral)-b: background color ortransparent-w/-H: output width and height
Rules
- Keep diagrams small; split large diagrams instead of making one unreadable chart.
- Use descriptive labels; avoid unexplained abbreviations.
- For slides, prefer high contrast and SVG output.
- Store generated SVG next to the source when the slide or doc references it.
Troubleshooting
- Run
mmdc -i file.mmd -o /tmp/mermaid-check.svgfor parser errors. - Quote labels with punctuation or special characters.
- Use alphanumeric node IDs with underscores.
- Reduce graph size if layout overlaps.
Related Skills
narumiruna/scoring-agent-skills
development
VerifiedTrustedCommunity
Score or compare one or more agent skills across trigger clarity, workflow actionability, safety boundaries, verification rigor, incremental knowledge value, and leanness. Use only when the user explicitly asks for ratings, numerical quality scores, rubric-based scorecards, or scored comparisons; use creating-agent-skills for unscored reviews or revisions.
8SKILL.mdUpdated Jul 29, 2026
narumiruna/improving-codebase-architecture
development
VerifiedTrustedCommunity
Assess or improve an existing codebase's architecture when the user asks about module boundaries, coupling, scattered ownership, testability, change locality, deep modules, seams, or behavior-preserving structural refactoring. Use for cross-module design rather than ordinary diff review or a confirmed edge-case bug fix.
8SKILL.mdUpdated Jul 29, 2026
narumiruna/auditing-code-security
development
VerifiedTrustedCommunity
Perform read-only security audits, vulnerability assessments, or threat-focused reviews of diffs, pull requests, code paths, or explicitly scoped repositories when security is the primary objective or acceptance criterion. Use reviewing-code for ordinary review with baseline security coverage and hardening-code-paths for fixing confirmed findings.
8SKILL.mdUpdated Jul 29, 2026
narumiruna/running-panel-review-loops
development
VerifiedTrustedCommunity
Run iterative multi-reviewer panels over a code diff, verify their findings, apply explicitly authorized fixes, and re-review the updated change until it passes or reaches a stopping condition. Use when the user asks for a panel loop, multi-model code-review consensus, or a review-fix-re-review cycle.
8SKILL.mdUpdated Jul 26, 2026