markdown-mermaid

Creates styled Mermaid diagrams and markdown documentation with consistent palettes and layout patterns.

1|Updated Mar 5, 2026
One-click install
npx skills add https://github.com/fabioc-aloha/AlexAgent --skill markdown-mermaid-fabioc-aloha
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: markdown-mermaid
Source: https://github.com/fabioc-aloha/AlexAgent/tree/main/plugin/skills/markdown-mermaid
Command: npx skills add https://github.com/fabioc-aloha/AlexAgent --skill markdown-mermaid-fabioc-aloha

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) components.

What problem does it solve? Mermaid diagrams often render with broken layouts, saturated colors, unreadable labels, or literal \n text, and markdown documents lack consistent figure labeling and styling. This Skill enforces a mandatory six-step ATACCU workflow (Analyze, Think, Apply, Create, Check, Update) so every diagram follows the GitHub Pastel v2 palette, proper init directives, and balanced layout patterns before being written to the target file. ## Core Features & Use Cases - ATACCU Diagram Protocol: A pre-flight checklist and quality gate that prevents common violations like missing init directives, white edge-label backgrounds in dark mode, and lopsided fan-out layouts. - Palette & Layout System: Copy-paste GitHub Pastel v2 and Fishbowl classDef styles plus named Medallion, Lineage, and Pipeline subgraph patterns for well-proportioned flowcharts, Gantt, and sequence diagrams. - Multi-Tool & Platform Guidance: Decision frameworks for choosing Mermaid, PlantUML, Graphviz, or D2 by audience and platform, plus Shields.io badge templates, emoji escape fixes, and VS Code preview configuration via the included CSS and setup prompt. - Use Case: When documenting a data pipeline, load this Skill to generate a Medallion-pattern flowchart with pastel classDef styling, transparent edge labels, and a numbered figure caption that renders correctly on GitHub and in VS Code dark mode. ## Quick Start Ask the agent to create a Mermaid flowchart of your process using the markdown-mermaid skill and write it into your documentation file.

Frequently Asked Questions about markdown-mermaid

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

FAQPage Schema
How do I create a Mermaid flowchart with consistent colors?▼

Start with the init directive setting theme to base and edgeLabelBackground to transparent, then apply GitHub Pastel v2 classDef styles like fill:#ddf4ff with stroke:#80ccff. Finish with linkStyle default stroke:#57606a for neutral gray arrows.

Mermaid vs PlantUML vs D2 for architecture diagrams?▼

Mermaid renders natively on GitHub and suits general-purpose diagrams with low complexity. PlantUML fits enterprise UML and AWS or Azure diagrams, while D2 produces clean architecture overviews for executive audiences.

Why does my Mermaid diagram show a white box behind edge labels?▼

The edgeLabelBackground theme variable is hardcoded to #ffffff, which appears as a white box in dark mode. Set edgeLabelBackground to transparent in the init directive and avoid forcing theme: 'dark'.

Why does \n render as literal text in Mermaid node labels?▼

Mermaid does not interpret backslash-n escape sequences in node labels, so they display as raw characters. Use the HTML <br/> tag instead for multi-line labels in flowcharts.

How do I fix a Mermaid diagram that is too wide or too tall?▼

Break the content into multiple subgraphs using opposing directions, such as TD outer with LR inner (Medallion pattern). Connect subgraphs with edges or invisible ~~~ links defined outside the subgraph blocks.

Does VS Code render Mermaid diagrams in Copilot Chat?▼

VS Code 1.109 and later render Mermaid natively in chat via the renderMermaidDiagram tool with pan, zoom, and fullscreen support. For markdown files, use fenced mermaid code blocks with the bierner.markdown-mermaid extension.