skills.rest
kwojtasinski-repo
kwojtasinski-repoCOMMUNITY
Explore all skills by this author →
GitHub

mermaid-diagram

Generates Mermaid diagrams that render correctly in GitHub, VS Code, and Azure DevOps wikis.

Updated Nov 19, 2020
Search Tags:#documentation#markdown#mermaid#github#flowchart#azure devops#diagram
One-click install
npx skills add https://github.com/kwojtasinski-repo/ECommerceApp --skill mermaid-diagram-kwojtasinski-repo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mermaid-diagram
Source: https://github.com/kwojtasinski-repo/ECommerceApp/tree/main/.github/skills/mermaid-diagram
Command: npx skills add https://github.com/kwojtasinski-repo/ECommerceApp --skill mermaid-diagram-kwojtasinski-repo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Mermaid diagrams often break when published to different platforms because GitHub, VS Code, and Azure DevOps wikis use different fence syntaxes and support different Mermaid features, causing lexical errors and unrendered diagrams. ## Core Features & Use Cases - Target-aware fence selection: Chooses between backtick fences for GitHub/VS Code and :::mermaid fences for Azure DevOps wikis or dual-target documents. - ADO constraint enforcement: Avoids unsupported syntax such as flowchart, slashes or colons in node labels, long arrows, subgraph links, Font Awesome icons, and HTML in labels. - Diagram type guidance: Covers graph, sequenceDiagram, classDiagram, stateDiagram-v2, erDiagram, gantt, and gitGraph with node shape and edge label references. - Use Case: When documenting an order checkout flow in a wiki page published to both GitHub and Azure DevOps, generate a state machine diagram that renders without lexical errors on both platforms. ## Quick Start Ask the assistant to create a Mermaid diagram of your workflow and specify whether the target is GitHub, Azure DevOps, or both.

Frequently Asked Questions about mermaid-diagram

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

FAQPage Schema
How do I make Mermaid diagrams render in Azure DevOps wiki?▼

Use the :::mermaid fence instead of backtick fences, and write graph TD or graph LR rather than flowchart. Avoid slashes and colons in node labels, long arrows, subgraph links, Font Awesome icons, and HTML inside labels.

What Mermaid fence syntax works on both GitHub and Azure DevOps?▼

The :::mermaid fence renders in both Azure DevOps wikis and GitHub, making it the correct choice for dual-target documents. Standard backtick fences only work on GitHub and VS Code preview.

Why does my Mermaid diagram show a lexical error in Azure DevOps?▼

Lexical errors in ADO are usually caused by slashes or colons inside node label text, such as A[/signup] or A[Fill form: details]. Replace them with plain text like A[signup page] or A[Fill form - details].

Which Mermaid diagram types are supported for documentation?▼

Supported types include graph for flows, sequenceDiagram for service interactions, classDiagram for domain models, stateDiagram-v2 for state machines, erDiagram for schemas, gantt for roadmaps, and gitGraph for branch strategies.

Can I use flowchart instead of graph in Mermaid for ADO wikis?▼

No, the flowchart diagram type is unsupported in Azure DevOps wikis. Use graph TD or graph LR instead, which provide equivalent flowchart functionality and render correctly in ADO.

Related Skills

Explore More Software Engineering Skills→
sgcarstrendssgcarstrends
21

mermaid-diagrams

Create and maintain Mermaid diagrams for system architecture, data flows, and workflows.

Official
Basic
Cloud-Byte-ConsultingCloud-Byte-Consulting

ado-wiki-mermaid

Generates Azure DevOps Wiki-ready Mermaid diagrams using ::: mermaid container fences.

Official
Intermediate
FaysilAlshareefFaysilAlshareef
4

diagram-gen

Generate Mermaid diagrams for architecture, event flows, and sequence diagrams.

Community
Intermediate
royhenengelroyhenengel

diagrams-builder

Guide diagram type selection and syntax for Mermaid, PlantUML, and Draw.io.

Community
Advanced