skills.rest
oriddd
oridddCOMMUNITY
Explore all skills by this author →
GitHub

uml-diagram

Create and maintain Mermaid UML diagrams for architecture and flow documentation.

Updated Jun 25, 2026
Search Tags:#markdown#mermaid#github#sequence diagram#architecture documentation#diagram#uml
One-click install
npx skills add https://github.com/oriddd/ai-toolkit --skill uml-diagram-oriddd
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: uml-diagram
Source: https://github.com/oriddd/ai-toolkit/tree/main/copilot/public/skills/uml-diagram
Command: npx skills add https://github.com/oriddd/ai-toolkit --skill uml-diagram-oriddd

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Documenting system architecture and interaction flows often requires external diagramming tools, generated images, and manual updates that drift out of sync with code. This Skill provides ready-to-use Mermaid templates that render natively on GitHub, GitLab, and Azure DevOps directly from Markdown. ## Core Features & Use Cases - Seven Diagram Types: Templates for system context, component, sequence, class, state, ERD, flowchart, and Gantt diagrams with copy-paste Mermaid syntax. - Native Rendering: Diagrams live as plain Markdown in git, rendering automatically on GitHub and GitLab with no build step or committed images. - Use Case: When writing an ADR for a new event-driven feature, use the sequence diagram template to document the producer-to-consumer flow, then commit the Markdown file so reviewers see the rendered diagram directly in the pull request. ## Quick Start Create a Mermaid sequence diagram showing the request flow from controller through service to database for my current endpoint.

Frequently Asked Questions about uml-diagram

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

FAQPage Schema
How do I create UML diagrams in Markdown for GitHub?▼

Wrap Mermaid syntax in a fenced code block with the mermaid language identifier inside any .md file. GitHub renders the diagram natively in the browser with no plugins, build steps, or generated images required.

Mermaid vs PlantUML for architecture diagrams?▼

Mermaid renders natively on GitHub, GitLab, and Azure DevOps with no installation, while PlantUML requires Java, an external image generation step, and committing generated images to git. Mermaid is simpler for GitHub-based projects; PlantUML offers more diagram features.

Does Mermaid work in VS Code and IntelliJ?▼

Yes. VS Code supports Mermaid through the Markdown Preview Mermaid Support extension, and IntelliJ IDEA renders Mermaid via its marketplace plugin or built-in Markdown preview in newer versions.

Why is my Mermaid diagram not rendering on GitHub?▼

The most common cause is a missing or misspelled mermaid language identifier on the opening code fence, or an unclosed fence. Verify the block starts with ```mermaid and the file has a .md extension.

How do I validate Mermaid diagram syntax in CI?▼

Install @mermaid-js/mermaid-cli via npm and run mmdc against each Markdown file in your pipeline. A non-zero exit code indicates invalid syntax, letting you fail the build before merging broken diagrams.

Related Skills

Explore More Software Engineering Skills→
girijashankarjgirijashankarj
28

architecture-docs

Generate ADRs, system overviews, and Mermaid diagrams for architecture documentation.

Community
Intermediate
Vincri126Vincri126

doc-generator

Generate documentation standards, templates, and QA gate guidance for technical projects.

Community
Advanced
abudhahirabudhahir

architecture-documenter

Generate system architecture documentation and Architecture Decision Records.

Community
Advanced
RDCrystalLabRDCrystalLab

drawio

Generate editable draw.io diagrams using structured mxCell XML.

Official
Advanced