Mermaid Diagrams

Comprehensive toolkit for creating consistent, cognitively-optimized Mermaid diagrams following the Mermaid Diagram Guidelines (MDG) v1.0 standard. Use for creating flowcharts, system architectures, process flows, sequence diagrams, ERDs, state diagrams, Gantt charts, mindmaps, class diagrams, and conceptual maps. Supports both Diagram Mode (human visual consumption) and RAG Mode (knowledge-graph extraction). Always use when users request Mermaid diagrams or when visualizing systems, processes, or relationships.

6 starsData & Analytics

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add sbb-hdw/mdg --skill mermaid-diagrams

Manual install

git clone --depth 1 https://github.com/sbb-hdw/mdg.git /tmp/mdg
mkdir -p ~/.claude/skills
cp -r /tmp/mdg/. ~/.claude/skills/mermaid-diagrams

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Mermaid Diagram Guidelines (MDG v1.0)

This skill enables creation of MDG-compliant Mermaid diagrams with consistent styling, cognitive optimization, and support for both visual presentation and knowledge-graph extraction.

## Quick Start

### Emergency Rules (Always Apply)
1. Use only `<br>` to indicate line breaks inside nodes, but only insert line breaks when absolutely needed for some known reason
2. **CRITICAL for flowchart: Always include `color:#000000` in every classDef** — Without this, text is invisible in dark-mode rendering environments. (Flowchart only — classDiagram does NOT support `classDef`; use `themeVariables` instead.)
3. **CRITICAL for flowchart: Apply styles to INDIVIDUAL NODES, not subgraphs** — Subgraph styling does not propagate to node text. Use `class NodeA,NodeB myStyle` for nodes. Use `style SubgraphID ...` for subgraph containers.
4. **CRITICAL: Subgraph identifiers MUST NOT contain spaces** — use CamelCase or underscores
5. **CRITICAL: Subgraph titles need darker styling** — Use `style` directive to ensure subgraph labels are visible against colored backgrounds
6. **CRITICAL: Every diagram MUST have a title** — Use the appropriate title mechanism for each diagram type (see Title Requirements below)
7. First non-blank line **must** be an MDG header tag (e.g., `%%mdg:DGM:1.0%%`)
8. If metadata unknown, ask user once, then fill in available information

Read the full skill on GitHub

Details

Skill name: mermaid-diagrams
Repository: sbb-hdw/mdg
License: MIT
Repo updated: 11 April 2026

FAQ

What does the Mermaid Diagrams skill do?

How do I install the Mermaid Diagrams skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add sbb-hdw/mdg --skill mermaid-diagrams. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Mermaid Diagrams popular?

It lives in sbb-hdw/mdg, which has 6 GitHub stars and 0 forks.

Related skills

Webclaw3

fatmind/webclaw3

浏览器自动化 / 网页数据采集 / 爬虫抓取——用你自己的 Chrome 和已登录状态干活，不用重新登录、不用交账号密码、不怕反爬。所有需要操作浏览器的活都走这个 skill。场景一（日常上网干活）：搜东西、看网页、查数据、抓列表、导表格、下载内容，或者在网站里动手操作——点按钮、填表单、发内容、和商家聊天；包括必须登录才能看的页面，如小红书、抖音、微博、推特(X)、知乎、B站、公众号、淘宝、拼多多、Shopify 后台等。场景二（沉淀成 skill）：任务跑通了，用户说"帮我提炼""以后每天自动跑"，把这次探索固化成可反复运行、零 token 的本地脚本 skill，可配定时任务。场景三（修复）：网站改版导致之前生成的 skill 跑失败了，用户来找修，本地直接修好。 (EN) Browser automation and web scraping that drives your own logged-in Chrome — explore once, distill it into a free, deterministic skill you can rerun daily.

Data & Analytics

Xianyu Radar

duceman495/xianyu-radar

闲鱼(咸鱼/goofish.com)行情雷达：抓取在售商品并分析价格分布、供给结构、机会价格带、卖家竞争，输出可决策的 Markdown 报告。当用户想「搜闲鱼行情」「看看闲鱼上 XX 多少钱」「闲鱼比价」「分析闲鱼价格」「闲鱼市场调研」「蹲二手」「监控闲鱼上新」「选品调研」「找供给缺口」时使用。含关键词爬取、二手估价、竞品分析、CSV/JSON 导出。

Data & Analytics

Aelfscan Skill

AelfScanProject/aelfscan-skill

AelfScan explorer data retrieval and analytics skill for agents.

Data & Analytics

Game Cover Downloader Skill

wang1025475397/game-cover-downloader-skill

Downloads game cover thumbnails with tiny-scraper. Invoke when user asks to find or download covers for games, ROM files, or ROM folders.

Data & Analytics

Build Professional Workbench

cylqwe7855-alt/build-professional-workbench

Build, redesign, extend, or audit a complete role-based professional workbench, operations cockpit, case portal, expert workstation, or data-rich internal tool for any occupation. Use for 工作台、业务驾驶舱、职业后台、运营中心、role dashboard、admin portal、CRM-like workspace or reusable multi-page web apps, especially when every module needs realistic records, distinct dashboards, profession-specific information architecture, Quiet Luxury A visual design, complex interactions, automatic local persistence, offline pure-Web compatibility and verifiable workflows.

Data & Analytics

Data Craft

yixiliu617/data-craft

Generate beautiful themed HTML data displays. Six visual idioms with matched voices, rendered as self-contained HTML files. Use when the user asks for charts, dashboards, reports, tearsheets, briefings, data visualizations, or any data-driven document.

Data & Analytics

Browse the most popular Claude skills, all data & analytics skills, or write your own with the skills generator.