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
Decision gist · record as of 2026-06-29
Mermaid Diagramming creates flowcharts, sequence diagrams, ERDs, and other technical visuals for documentation. 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.
Use it when
- mermaid-diagramming covers flowcharts, sequence diagrams, entity-relationship diagrams (ERD), state machines, Gantt charts.
- mermaid-diagramming teaches styling through theme selection and custom CSS configuration.
Verify before relying
Read SKILL.md below before installing (2 files). Open directory: indexed for reading, not audited.
Install
NickCrew/Claude-Cortex/mermaid-diagramming · repository language: Python
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
File tree — 2 files
skills/mermaid-diagramming/SKILL.md
skills/mermaid-diagramming/references/diagram-types.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Create technical diagrams for documentation using Mermaid”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Mermaid Diagrams converts text-based syntax into visual diagrams—flowcharts, sequence charts, ER models, class diagrams, Gantt timelines, and more. Embed diagrams directly in Markdown files and documentation. Perfect for system architecture, data modeling, and project planning without leaving your editor.
Animated Diagram turns plain-English descriptions into motion graphics videos of flowcharts, decision trees, and pipelines. You describe the flow, Claude writes Mermaid syntax, and built-in React components manage layout via dagre, node/edge reveals, trace animations, and optional retro styling. Perfect for explainer videos and architecture walkthroughs.
Mermaid Graph Writer produces syntactically correct Mermaid diagrams by selecting the right diagram type for your content and applying consistent formatting rules. It handles flowcharts, sequence diagrams, state machines, ER models, timelines, mindmaps, Gantt charts, and other Mermaid-supported formats—but doesn't render them to images.
Mermaidjs V11 lets you create technical diagrams from declarative text syntax, rendering to SVG, PNG, or PDF. It covers flowcharts, sequence diagrams, class diagrams, state machines, ER diagrams, Gantt charts, and more—ideal for documentation, architecture planning, and system visualization. Use it inline in markdown, via CLI, or embedded in JavaScript applications with theme and configuration support.
Design Doc Mermaid transforms descriptions and source code into visual diagrams across multiple types—activity flows, deployment infrastructure, system architecture, and API sequences. It includes specialized guides for different diagram categories, code-to-diagram workflows for popular frameworks, and Python utilities for extraction and image conversion.
Mermaid Studio generates polished diagrams from descriptions or code, supporting flowcharts, sequences, ERDs, C4 architecture, AWS infrastructure, and 15+ other diagram types. Render to SVG, PNG, or ASCII with syntax validation and curated color themes built in.
More skills mermaid-diagrams (MIT) · mermaid-diagram-generator (MIT) · sf-diagram-mermaid (MIT) · charting (Apache-2.0) · Mermaid Syntax (NOASSERTION) · Mermaid Builder (NOASSERTION) · markdown-mermaid-writing (MIT) · mermaid-diagrams (MIT)