skills.rest
Luscii
LusciiOFFICIAL
Explore all skills by this author →
WebsiteGitHub

mermaid-diagrams

Create Mermaid diagrams in Markdown files for visualizing workflows, architecture, and data models.

Updated May 7, 2026
Search Tags:#documentation#markdown#mermaid#github#flowchart#visualization#diagrams
One-click install
npx skills add https://github.com/Luscii/terraform-aws-iam-policy-permission-boundary --skill mermaid-diagrams-luscii
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mermaid-diagrams
Source: https://github.com/Luscii/terraform-aws-iam-policy-permission-boundary/tree/main/.github/skills/mermaid-diagrams
Command: npx skills add https://github.com/Luscii/terraform-aws-iam-policy-permission-boundary --skill mermaid-diagrams-luscii

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Documentation often lacks visual representation of workflows, architecture, and processes, making complex systems hard to understand. This Skill lets you embed Mermaid diagrams directly in Markdown files that render automatically on GitHub, VS Code, and other Markdown viewers. ## Core Features & Use Cases - Multiple Diagram Types: Supports flowcharts, sequence diagrams, class diagrams, state diagrams, ER diagrams, Gantt charts, pie charts, git graphs, mindmaps, timelines, quadrant charts, and user journeys. - Best Practices Guidance: Provides rules for choosing diagram types, keeping diagrams simple, consistent styling, and adding descriptive context. - Advanced Features: Covers clickable nodes, themes, subgraphs, and troubleshooting common rendering issues. - Use Case: When writing an architecture decision record or feature documentation, add a flowchart showing the deployment workflow or a sequence diagram showing API interactions so readers grasp the system at a glance. ## Quick Start Ask the AI to add a Mermaid flowchart visualizing your deployment workflow to your README.md file.

Frequently Asked Questions about mermaid-diagrams

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a Mermaid diagram to a Markdown file?▼

Wrap Mermaid code in a fenced code block with the mermaid language identifier, starting with the diagram type such as flowchart TD or sequenceDiagram. The diagram renders automatically on GitHub, in VS Code, and many other Markdown viewers.

What diagram types does Mermaid support?▼

Mermaid supports flowcharts, sequence diagrams, class diagrams, state diagrams, ER diagrams, Gantt charts, pie charts, git graphs, mindmaps, timelines, quadrant charts, and user journeys. Choose the type based on whether you show processes, interactions, structures, or timelines.

Do Mermaid diagrams render on GitHub?▼

Yes, GitHub renders Mermaid diagrams natively in Markdown files, issues, and pull requests. They also render in VS Code and many other Markdown viewers without additional plugins.

Why is my Mermaid diagram not rendering?▼

Check that the code block language is mermaid rather than mmd and validate the syntax at the Mermaid Live Editor. Common issues include syntax errors, overly complex diagrams, and text overlapping that requires shorter labels or direction changes.

How do I make Mermaid diagram nodes clickable?▼

Use the click syntax followed by the node name and URL, such as click NodeName "https://url" "Tooltip text". This works in flowcharts and lets readers navigate directly to related documentation or examples.

Related Skills

Explore More Software Engineering Skills→
ruskicoderruskicoder
3

system-design

Design system architectures with requirements analysis, API contracts, and trade-off evaluation.

Community
Intermediate
microsoftmicrosoft
2.9k

wiki-vitepress

Package wiki Markdown into a VitePress static site with dark theme and Mermaid diagrams.

Official
Advanced
fjrevoredofjrevoredo
287

diagram-maintainer

Edit and regenerate Mermaid and D2 diagram sources with SVG verification.

Community
Basic
atanakaatanaka

classdiagram-image-to-json

Convert UML class diagram images into a machine-readable domain-model.json.

Community
Advanced