rileyhilliard/visualizing-with-mermaid
plugins/ce/skills/visualizing-with-mermaid/SKILL.md
Creates professional Mermaid diagrams with semantic styling and visual hierarchy. Use when creating flowcharts, sequence diagrams, state machines, class diagrams, or architecture visualizations.
$ install --global
skillsauthnpx skillsauth add rileyhilliard/claude-essentials visualizing-with-mermaidInstall 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: Apr 11, 2026, 10:57 PM60.6s3 files scanned
SKILL.md
- name:
- visualizing-with-mermaid
- description:
- Creates professional Mermaid diagrams with semantic styling and visual hierarchy. Use when creating flowcharts, sequence diagrams, state machines, class diagrams, or architecture visualizations.
Mermaid Diagrams
Default: Dark mode colors from references/color-palettes.md.
Choosing Diagram Type
| Concept | Diagram Type | |---------|--------------| | Process flows, decisions | Flowchart (TB direction) | | API calls, message passing | Sequence diagram | | Lifecycle states | State diagram | | Data models, relationships | Class diagram or ERD | | System architecture | Flowchart with subgraphs (LR direction) |
Core Principles
- Visual hierarchy over decoration - Color/size guide the eye to what matters
- Semantic color - Colors have meaning (grouping, state, criticality)
- Simplicity over completeness - 80% clearly beats 100% confusingly
- 7-12 nodes max - Human working memory limit; break larger systems into drill-downs
Quick Styling Guide
Do:
- Use fills to group related components
- Highlight critical paths with stroke width
- Different shapes = different component types (cylinders for DBs, diamonds for decisions)
- Keep labels to 1-4 words; use
<br/>for longer
Don't:
- Pure black (
#000000) - too harsh, use dark gray - Saturated background colors - tire the eyes
- More than 5 colors per diagram
- Low-contrast combinations
Shape Semantics
- Rectangles: Services, processes
- Rounded rectangles: APIs, interfaces
- Circles: Start/end points, external systems
- Diamonds: Decision points
- Cylinders: Databases
- Hexagons: Queues, message brokers
Layout
LR (left-to-right): Pipelines, architecture diagrams TB (top-to-bottom): Hierarchies, decision flows
Use subgraphs for: deployment boundaries, logical layers, team ownership, trust boundaries.
Resources
- Color palettes: See references/color-palettes.md
- Pattern examples: See references/examples.md for architecture, state machines, data flows, ERDs
Workflow
- Purpose - What decision/understanding should this enable?
- Type - Choose based on what you're showing
- Structure - Identify components, relationships, groupings
- Style - Apply semantic colors, highlight critical paths
- Review - Can someone understand it in 10 seconds?
Related Skills
rileyhilliard/structuring-articles
development
VerifiedTrustedCommunity
Selects and applies professional journalistic story structures (WSJ Formula, Inverted Pyramid, Hourglass, Tick-Tock, etc.) based on the content being written. Use when writing articles, blog posts, features, essays, long-form content, news stories, trend pieces, investigative reports, profiles, or any narrative prose longer than a few paragraphs. Also use when the user asks for help structuring a piece, choosing a story framework, organizing a draft, outlining an article, or wants to know which article format fits their content. Trigger on requests like "help me structure this," "what format should I use," "write a feature about," "draft a blog post on," or any mention of story structure, article architecture, or narrative frameworks. Complements the writer skill (which handles tone and anti-AI rhetoric) by providing the structural blueprint.
122SKILL.mdUpdated May 28, 2026
rileyhilliard/writer
testing
VerifiedTrustedCommunity
Writing style and tone guide for human-sounding content. Use when writing documentation, READMEs, commit messages, PR descriptions, blog posts, LinkedIn posts, social media content, or any user-facing content.
122SKILL.mdUpdated Apr 11, 2026
rileyhilliard/writing-plans
data-ai
VerifiedTrustedCommunity
Create implementation plans with tasks grouped by subsystem. Related tasks share agent context; groups parallelize across subsystems.
118SKILL.mdUpdated Apr 11, 2026
rileyhilliard/systematic-debugging
development
VerifiedTrustedCommunity
Debugging framework that finds root causes before proposing fixes. Use when investigating bugs, errors, unexpected behavior, failed tests, or when previous fixes haven't worked.
118SKILL.mdUpdated Apr 11, 2026