Mermaid diagram

Skill fabioc-aloha/Alex_Skill_Mall/plugins/documentation/mermaid-diagram

284 curated plugins for AI assistants across 16 categories: security, Azure, documentation, code quality, cloud infrastructure, and more. Works with GitHub Copilot. Drop into .github/skills/local/ and go.

Install

npx -y skills add fabioc-aloha/Alex_Skill_Mall --skill mermaid-diagram

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

3 stars3 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Create diagrams using Mermaid.js markdown-inspired syntax. Supports 23+ diagram types including flowcharts, sequence diagrams, class diagrams, ER diagrams, Gantt charts, state diagrams, pie charts, git graphs, C4 architecture, mindmaps, timelines, and more. Outputs plain text (.mmd or .md) files renderable on GitHub, GitLab, and mermaid.live, and many more clients.

SKILL.md

3.5 KB, as published. Nobody here has run it

Mermaid Diagram Builder

Generate diagrams using Mermaid.js text-based syntax for comprehensive visualization needs.

Workflow

Select diagram type - Choose from 23+ types (see below)
Review syntax - Consult @references/diagram-types.md for that type
Build diagram - Follow syntax patterns from @references/syntax.md
Add configuration - Theme/styling if needed (see @references/configuration.md)
Follow best practices - Accessibility, testing (see @references/best-practices.md)
Generate file - Create .mmd or .md file

Diagram Types

Mermaid supports 23+ diagram types organized into categories:

Flow & Process: Flowcharts, Sequence, State, User Journey, Gantt, Kanban, Timeline
Software & Architecture: Class, ER, C4, Architecture (beta), Block, Packet, Git Graphs
Data & Analysis: Pie, XY, Sankey, Quadrant, Radar (beta), Treemaps (beta)
Conceptual: Mindmaps, Requirements, ZenUML

See @references/diagram-types.md for complete syntax, features, and use cases for each type.

Configuration & Theming

5 built-in themes: default, neutral, dark, forest, base
Custom theming via themeVariables (only with base theme)
Per-diagram frontmatter configuration (recommended)
Two rendering looks: classic, handDrawn
Multiple layout algorithms: dagre, elk, tidy tree

See @references/configuration.md for complete options and examples.

Syntax Fundamentals

All diagrams share common patterns:

Declarative syntax starting with diagram type
Direction control: TB, LR, RL, BT
Comments: %%
Styling: frontmatter config or inline styles
Special character handling

See @references/syntax.md for detailed syntax patterns.

Best Practices

Key principles:

Always add accTitle and accDescr for accessibility
Use frontmatter for configuration (not deprecated directives)
Break complex diagrams into smaller, focused ones (<15 nodes)
Test at https://mermaid.live before finalizing
Quote reserved words like "end"

See @references/best-practices.md for comprehensive guidance, common pitfalls, and optimization tips.

Output Format

Save as .mmd (Mermaid) or .md (Markdown) files:

View directly on GitHub and GitLab
Edit at https://mermaid.live
Render in VS Code, Confluence, Notion, GitBook, Docusaurus
Integrate into CI/CD pipelines

Resources

Live Editor: https://mermaid.live (test and export)
Official Docs: https://mermaid.js.org
Repository: https://github.com/mermaid-js/mermaid
Icons: https://icones.js.org (for mindmaps/architecture)

References

@references/diagram-types.md - Complete syntax for all 23+ diagram types
@references/configuration.md - Theming, configuration, and customization
@references/syntax.md - Fundamental syntax patterns across all types
@references/best-practices.md - Best practices, pitfalls, and optimization