Visualizing With Mermaid
by rileyhilliard
Creates professional Mermaid diagrams with semantic styling and visual hierarchy. Use when creating flowcharts, sequence diagrams, state machines, class diagrams, or architecture visualizations.
Skill Details
Repository Files
3 files in this skill directory
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
Team Composition Analysis
This skill should be used when the user asks to "plan team structure", "determine hiring needs", "design org chart", "calculate compensation", "plan equity allocation", or requests organizational design and headcount planning for a startup.
Startup Financial Modeling
This skill should be used when the user asks to "create financial projections", "build a financial model", "forecast revenue", "calculate burn rate", "estimate runway", "model cash flow", or requests 3-5 year financial planning for a startup.
Startup Metrics Framework
This skill should be used when the user asks about "key startup metrics", "SaaS metrics", "CAC and LTV", "unit economics", "burn multiple", "rule of 40", "marketplace metrics", or requests guidance on tracking and optimizing business performance metrics.
Market Sizing Analysis
This skill should be used when the user asks to "calculate TAM", "determine SAM", "estimate SOM", "size the market", "calculate market opportunity", "what's the total addressable market", or requests market sizing analysis for a startup or business opportunity.
Anndata
This skill should be used when working with annotated data matrices in Python, particularly for single-cell genomics analysis, managing experimental measurements with metadata, or handling large-scale biological datasets. Use when tasks involve AnnData objects, h5ad files, single-cell RNA-seq data, or integration with scanpy/scverse tools.
Geopandas
Python library for working with geospatial vector data including shapefiles, GeoJSON, and GeoPackage files. Use when working with geographic data for spatial analysis, geometric operations, coordinate transformations, spatial joins, overlay operations, choropleth mapping, or any task involving reading/writing/analyzing vector geographic data. Supports PostGIS databases, interactive maps, and integration with matplotlib/folium/cartopy. Use for tasks like buffer analysis, spatial joins between dat
Market Research Reports
Generate comprehensive market research reports (50+ pages) in the style of top consulting firms (McKinsey, BCG, Gartner). Features professional LaTeX formatting, extensive visual generation with scientific-schematics and generate-image, deep integration with research-lookup for data gathering, and multi-framework strategic analysis including Porter's Five Forces, PESTLE, SWOT, TAM/SAM/SOM, and BCG Matrix.
Plotly
Interactive scientific and statistical data visualization library for Python. Use when creating charts, plots, or visualizations including scatter plots, line charts, bar charts, heatmaps, 3D plots, geographic maps, statistical distributions, financial charts, and dashboards. Supports both quick visualizations (Plotly Express) and fine-grained customization (graph objects). Outputs interactive HTML or static images (PNG, PDF, SVG).
Excel Analysis
Analyze Excel spreadsheets, create pivot tables, generate charts, and perform data analysis. Use when analyzing Excel files, spreadsheets, tabular data, or .xlsx files.
Neurokit2
Comprehensive biosignal processing toolkit for analyzing physiological data including ECG, EEG, EDA, RSP, PPG, EMG, and EOG signals. Use this skill when processing cardiovascular signals, brain activity, electrodermal responses, respiratory patterns, muscle activity, or eye movements. Applicable for heart rate variability analysis, event-related potentials, complexity measures, autonomic nervous system assessment, psychophysiology research, and multi-modal physiological signal integration.