mermaid-diagramming
Build professional technical diagrams in Mermaid syntax covering flowcharts, sequence diagrams, entity-relationship models, state machines, Gantt charts, and architecture views. The skill guides you through scoping the diagram's purpose and audience, drafting clean code, applying consistent styling, and delivering renderable outputs for documentation.
Mermaid Diagramming creates flowcharts, sequence diagrams, ERDs, and other technical visuals for documentation.
AI-generated summary based on this skill's SKILL.md
Install
NickCrew/Claude-Cortex/mermaid-diagramming · repository language: Python
git clone https://github.com/NickCrew/Claude-Cortex
cp -r Claude-Cortex/skills/mermaid-diagramming ~/.claude/skills/mermaid-diagrammingFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I create a flowchart in mermaid-diagramming?
mermaid-diagramming enables you to build flowcharts by writing simple syntax that defines nodes and connections. Start by declaring `flowchart TD` (top-down) or `LR` (left-right), then define nodes using brackets or parentheses and connect them with arrows. For example, `A[Start] --> B{Decision} --> C[End]` creates a basic three-node flow. The skill guides you through syntax rules, node shapes, and logical flow structure to produce clean, renderable diagrams for documentation.
What diagram types does mermaid-diagramming support?
mermaid-diagramming covers flowcharts, sequence diagrams, entity-relationship diagrams (ERD), state machines, Gantt charts, architecture diagrams (C4), class diagrams, mindmaps, timelines, and gitgraph version control diagrams. The skill helps you select the right diagram type based on your documentation goal and audience, then provides syntax and best practices for each. This ensures your technical diagrams communicate intent clearly and fit your platform's rendering capabilities.
How can I style and theme mermaid diagrams for professional appearance?
mermaid-diagramming teaches styling through theme selection and custom CSS configuration. You can apply built-in themes (default, forest, dark, neutral) or define custom colors, fonts, and spacing via theme variables. The skill covers node styling, edge formatting, and background customization to match your documentation brand. Professional appearance also includes consistent labeling, readable font sizes, and logical layout—all covered in the styling and theming guidance.
How do I export mermaid diagrams to SVG or other formats?
mermaid-diagramming addresses export and rendering across platforms. You can use the Mermaid Live Editor for interactive preview and SVG export, integrate Mermaid into GitHub Markdown for automatic rendering, or embed diagrams in documentation tools that support Mermaid syntax. The skill covers platform-specific rendering options, ensuring your diagrams display correctly whether in web browsers, PDF documents, or version-controlled repositories.
What are mermaid diagramming best practices for technical documentation?
mermaid-diagramming emphasizes scoping your diagram's purpose and audience before drafting. Best practices include using clear, descriptive labels; choosing appropriate diagram types for your content; maintaining consistent styling; grouping related nodes with subgraphs; and testing rendering across target platforms. The skill also covers accessibility considerations like color contrast and semantic structure, ensuring diagrams are usable by all readers and integrate seamlessly into your documentation workflow.
How do I draw sequence diagrams with mermaid-diagramming?
mermaid-diagramming teaches sequence diagram syntax for modeling interactions between actors or systems. Declare `sequenceDiagram` and define participants, then use arrows (`->`, `-->`) to show message flow with labels. For example, `Actor->>System: Request` shows a synchronous call. The skill covers participant ordering, activation boxes, loop and alt constructs for conditional logic, and rendering best practices. Sequence diagrams are ideal for documenting API flows, user interactions, and system communication patterns.
SKILL.md
rendered from the published skill — quoted content, verbatim
Mermaid Diagramming
Create clear, professional Mermaid diagrams for technical documentation. Covers all major diagram types with both basic and styled variants, rendering guidance, and export recommendations.
When to Use This Skill
- Creating flowcharts for process documentation or decision trees
- Drawing sequence diagrams for API interactions or system communication
- Building ERDs for database schema documentation
- Designing state machine diagrams for
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 2 files
skills/mermaid-diagramming/SKILL.md
skills/mermaid-diagramming/references/diagram-types.md