Agent skill

Mermaid Check

by ranxi2001 in ranxi2001/zero2Agent

检查并修复 zero2Agent 项目中 mermaid 图表的语法问题。当用户说"mermaid 渲染错误""图表语法检查""mermaid 不显示""flowchart 报错""检查 mermaid"时触发。也适用于用户提到某篇文章的 mermaid 图无法渲染、显示 syntax error 的场景。

MITAuto-check passedDevelopment

Install Mermaid Check

skills CLI

$ npx skills add ranxi2001/zero2Agent --skill mermaid-check -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install ranxi2001/zero2Agent mermaid-check --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/ranxi2001/zero2Agent.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/mermaid-check .claude/skills/mermaid-check && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "mermaid-check" agent skill from https://github.com/ranxi2001/zero2Agent/tree/main/.agents/skills/mermaid-check into .claude/skills/mermaid-check/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "mermaid-check", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/ranxi2001/zero2Agent/tree/main/.agents/skills/mermaid-check

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add ranxi2001/zero2Agent --skill mermaid-check -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install ranxi2001/zero2Agent mermaid-check --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/ranxi2001/zero2Agent.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/mermaid-check .agents/skills/mermaid-check && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "mermaid-check" agent skill from https://github.com/ranxi2001/zero2Agent/tree/main/.agents/skills/mermaid-check into .agents/skills/mermaid-check/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "mermaid-check", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add ranxi2001/zero2Agent --skill mermaid-check -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install ranxi2001/zero2Agent mermaid-check --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/ranxi2001/zero2Agent.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/mermaid-check .cursor/skills/mermaid-check && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "mermaid-check" agent skill from https://github.com/ranxi2001/zero2Agent/tree/main/.agents/skills/mermaid-check into .cursor/skills/mermaid-check/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "mermaid-check", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/ranxi2001/zero2Agent.git --path .agents/skills/mermaid-check

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add ranxi2001/zero2Agent --skill mermaid-check -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install ranxi2001/zero2Agent mermaid-check --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/ranxi2001/zero2Agent.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/mermaid-check .gemini/skills/mermaid-check && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "mermaid-check" agent skill from https://github.com/ranxi2001/zero2Agent/tree/main/.agents/skills/mermaid-check into .gemini/skills/mermaid-check/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "mermaid-check", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install ranxi2001/zero2Agent mermaid-check

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add ranxi2001/zero2Agent --skill mermaid-check -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/ranxi2001/zero2Agent.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/mermaid-check .github/skills/mermaid-check && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "mermaid-check" agent skill from https://github.com/ranxi2001/zero2Agent/tree/main/.agents/skills/mermaid-check into .github/skills/mermaid-check/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "mermaid-check", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add ranxi2001/zero2Agent --skill mermaid-check -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install ranxi2001/zero2Agent mermaid-check --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/ranxi2001/zero2Agent.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/mermaid-check .opencode/skills/mermaid-check && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "mermaid-check" agent skill from https://github.com/ranxi2001/zero2Agent/tree/main/.agents/skills/mermaid-check into .opencode/skills/mermaid-check/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "mermaid-check", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: mermaid-check
GitHub stars: 715
Token cost: ~1.4k tokens
SKILL.md length: 331 words
Files: 1
Skills in repo: 8
Repo updated: Oct 10, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

Works in 3 steps: ：扫描 → ：模式匹配检测 → ：验证
Tasks that involve Diagrams
SKILL.md covers 渲染管线原理, 使用 Node.js 验证 mermaid 语法, 常见 Bug 与修复方案 and 检查流程, plus 1 more section
Calls npm, npx and python3

What it does

Mermaid Check is an agent skill from ranxi2001/zero2Agent. 检查并修复 zero2Agent 项目中 mermaid 图表的语法问题。当用户说"mermaid 渲染错误""图表语法检查""mermaid 不显示""flowchart 报错""检查 mermaid"时触发。也适用于用户提到某篇文章的 mermaid 图无法渲染、显示 syntax error 的场景。

Its SKILL.md is about 1.4k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Development, covering Diagrams. It works with Mermaid. The repository describes itself as: 面向大厂Agent研发岗位求职的agent教程网站，涵盖技术路线与面试八股文. The licence is MIT.

When your agent uses it

Tasks that involve Diagrams

Example prompts

“mermaid 渲染错误”
“图表语法检查”
“mermaid 不显示”
“/mermaid-check”

Requirements

Python 3
Node.js

Workflow steps

3 steps, taken from the step headings in SKILL.md.

：扫描
：模式匹配检测
：验证

What it can do on your machine

Read from SKILL.md and the folder at commit 472ce78. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
- npm
- npx
- python3
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use npm and npx, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Mermaid Check loads about 1.4k tokens when it runs. Until then it costs about 42 tokens; SKILL.md has 331 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~42
When it runs · the whole SKILL.md, loaded when a task matches: ~1.4k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from ranxi2001/zero2Agent at commit 472ce78, republished under its MIT licence (© ranxi2001). 331 words, ~1,371 tokens.

Download SKILL.mdSave it as .claude/skills/mermaid-check/SKILL.md (or your agent's skills folder).

name: mermaid-check
description: 检查并修复 zero2Agent 项目中 mermaid 图表的语法问题。当用户说"mermaid 渲染错误""图表语法检查""mermaid 不显示""flowchart 报错""检查 mermaid"时触发。也适用于用户提到某篇文章的 mermaid 图无法渲染、显示 syntax error 的场景。

Mermaid 语法检查与修复

本项目使用 mermaid 9.4.3（CDN 加载），配置 htmlLabels: false，securityLevel: 'loose'。图表写在 ```mermaid 代码围栏中，由 _layouts/default.html 中的 JS 转换后渲染。

渲染管线原理

```mermaid 代码围栏
  ↓ kramdown 渲染
<div class="language-mermaid"><code>原始文本（HTML 实体转义）</code></div>
  ↓ 项目 JS（default.html）
code.textContent → 原始 mermaid 文本（含 <br>、-->、| 等）
  ↓ srcToInnerHTML() 转换
innerHTML: 转义 < > & 但保留 <br/> 为真实 HTML 标签
  ↓ mermaid.init()
读取 innerHTML → entityDecode() → 解析器

关键函数 srcToInnerHTML

javascript

function srcToInnerHTML(src) {
    return src
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/&lt;br\s*\/?&gt;/gi, '<br/>');
}

原理：先将所有 HTML 特殊字符转义，再把   从实体还原为真实标签。 mermaid 的 entityDecode 通过 escape()/unescape() 能正确处理：

--> → 解码回 -->
  (真实标签) → escape 变为 %3Cbr/%3E → unescape 变回  
| → escape 变为 %7C → unescape 变回 |

使用 Node.js 验证 mermaid 语法

安装 mermaid CLI：

bash

npm install -g @mermaid-js/mermaid-cli

验证单个图表：

bash

echo 'flowchart LR
    A[text] -->|label| B' > /tmp/test.mmd
npx mmdc -i /tmp/test.mmd -o /tmp/test.svg 2>&1

批量验证项目中所有 mermaid 块：

bash

python3 << 'EOF'
import re, os, subprocess, tempfile

base = os.getcwd()
errors = []
for root, dirs, files in os.walk(base):
    dirs[:] = [d for d in dirs if d not in ['.git', '.claude', 'node_modules']]
    for f in files:
        if not f.endswith('.md'): continue
        path = os.path.join(root, f)
        with open(path) as fh:
            content = fh.read()
        for m in re.finditer(r'```mermaid\n(.*?)\n```', content, re.DOTALL):
            block = m.group(1)
            line = content[:m.start()].count('\n') + 1
            with tempfile.NamedTemporaryFile(suffix='.mmd', mode='w', delete=False) as tmp:
                tmp.write(block)
                tmp_path = tmp.name
            result = subprocess.run(
                ['npx', 'mmdc', '-i', tmp_path, '-o', '/dev/null'],
                capture_output=True, text=True
            )
            os.unlink(tmp_path)
            if result.returncode != 0:
                errors.append((path, line, result.stderr.strip()))

if errors:
    for path, line, err in errors:
        print(f'{path}:{line}')
        print(f'  {err[:200]}')
        print()
else:
    print('All mermaid blocks pass syntax check')
EOF

常见 Bug 与修复方案

Bug 1：`\n` 在代码围栏中不是换行

现象：节点标签想换行，写了 A[第一行\n第二行]，渲染出错或显示字面 \n

原因：\n 只是两个字符（反斜杠+n），mermaid 不认识

修复：用   或  

A[第一行<br>第二行]

Bug 2：Unicode 特殊符号导致 syntax error（已验证）

现象：C[读文件 × 5] 报 "Syntax error in graph"

原因：mermaid 9.4.3 的 JISON 解析器无法处理 × (U+00D7) 等 Unicode 特殊字符。通过本地 HTML 隔离测试确认：去掉 × 后同一图表立即恢复正常。

已知有问题的字符（未加引号时）：

× (U+00D7 乘号) — 已确认触发 syntax error
→ (U+2192 右箭头) — 已确认干扰箭头语法
← (U+2190 左箭头) — 同上
： (U+FF1A 全角冒号) — 已确认在 ([用户：...]) 中触发 error

安全的 Unicode 字符（已确认可用）：

CJK 汉字（中文标签正常）
= _ - ? 等 ASCII 符号
    在代码围栏中正常工作
以上所有有问题的字符在引号包裹的标签 ["..."] 中均安全

修复方案（二选一）：

方案 A — 替换为 ASCII 等价：

C[读文件 x5]           -- × → x
A -->|8k to 64k| B    -- → → to
A([用户: 帮我审查])    -- ： → :

方案 B — 用双引号包裹标签（推荐，保留原始字符）：

C["读文件 × 5"]
A(["用户：帮我做代码审查"])

核心规则：非 CJK 的 Unicode 符号在未加引号的标签中不安全。加上 "..." 引号即可解决。

Bug 3：`<div class="mermaid">` 中的 ` ` 导致解析失败

现象：写在 <div class="mermaid"> 中的   被浏览器 HTML 解析器消费，textContent 在节点标签中间断行

原因：浏览器先于 mermaid 解析 HTML，  变成 DOM 元素

修复：使用 ```mermaid 代码围栏（kramdown 保留原始文本）

markdown

` ` `mermaid
flowchart LR
    A[第一行<br>第二行] --> B
` ` `

Bug 4：`div.textContent = src` 破坏 entityDecode

现象：代码围栏图表初次渲染无法显示

原因：textContent 赋值导致 innerHTML 中   变为  。mermaid 的 entityDecode 内部用临时 div 的 innerHTML 解码实体时，  被解析为真实 HTML 元素，然后被 textContent 吞掉

修复：使用 srcToInnerHTML() 转换——先转义所有 HTML 字符，再将   恢复为真实   标签

Bug 5：主题切换后 mermaid 图表损坏

现象：切换深色/浅色模式后图表无法重新渲染

原因：rerenderMermaid 中用 el.innerHTML = src 直接设置原始文本，  和 > 被当作 HTML 解析

修复：rerenderMermaid 也必须使用 srcToInnerHTML() 转换

Bug 6：初始化时 mermaid 不根据当前主题渲染

现象：浅色模式下 mermaid 图显示为深色背景

原因：<head> 中 mermaid.initialize() 硬编码了 theme: 'dark'

修复：读取 data-theme 属性动态选择主题变量

Bug 7：subgraph 标题含特殊字符

现象：subgraph 内部框架 报错

修复：用引号包裹 subgraph FW["内部框架"]

Bug 8：edge label 含引号或特殊字符

现象：-->|含"引号"的文本| 报错

修复：整个 edge label 加引号 -->|"含引号的文本"|

检查流程

Step 1：扫描

bash

grep -rn '```mermaid' --include="*.md" . | grep -v ".claude/"

如仍有 <div class="mermaid">，先转为代码围栏。

Step 2：模式匹配检测

对每个 mermaid block 检查：

问题	检测	修复
使用 `<div class="mermaid">`	grep	转为代码围栏
`\n` 在节点标签中	`\\n` 在方括号/花括号内	→ `<br>`
Unicode 箭头 `→` `←`	正则	→ ASCII 文本
`×` 乘号 (U+00D7)	正则 `×`	→ ASCII `x`
其他 Unicode 符号	非 CJK 非 ASCII 字符	替换或用引号包裹
subgraph 标题无引号	`subgraph \w+ [` 后无引号	加引号
嵌套引号	`"` 在已有引号标签内	移除或转义

Step 3：验证

有 mmdc 就用 mmdc 验证，没有则依赖模式匹配。

节点标签换行正确写法

mermaid

flowchart LR
    A[第一行<br>第二行] --> B[单行]
    C["含特殊字符<br>如括号()"] --> D{判断}

规则：

用   或   换行
不要用 \n
含 (){}[]#& 等特殊字符时用双引号包裹整个标签
edge label 中含特殊字符也用引号：-->|"文本"|

Files

Just SKILL.md in .agents/skills/mermaid-check of ranxi2001/zero2Agent.

Open the folder on GitHubat commit 472ce78

Compare with similar skills

Mermaid Check next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Mermaid Check compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Mermaid Check this skillranxi2001/zero2Agent	715	—	~1.4k	Automated safety check: Pass	MIT	yesterday
Archify Diagramstt-a1i/archify	82k	—	~2.9k	Automated safety check: Pass	MIT	today
Diagram Designcathrynlavery/diagram-design	49k	1 repos	~7.6k	Automated safety check: Pass	MIT	today
Draw.io Diagram StudioAgents365-ai/drawio-skill	10k	—	~2.4k	Automated safety check: Notes	MIT	today
Pretty Mermaid Rendererimxv/Pretty-mermaid-skills	1.5k	—	~2k	Automated safety check: Pass	MIT	1 mo ago
Archify Diagram BuilderUnclecheng-li/AI_Animation	1.5k	2 repos	~4.1k	Automated safety check: Pass	MIT	6 days ago

Similar skills

Archify Diagrams
tt-a1i/archify
Creates interactive architecture, workflow, sequence, data-flow and lifecycle diagrams as standalone HTML with inline SVG, themes and image or video export.
82k GitHub stars~2.9k tokensUpdated today
DevelopmentAuto-check passed
Diagram Design
cathrynlavery/diagram-design
Creates branded diagrams, from architecture, flowchart and sequence to charts and maps, as self-contained HTML with inline SVG, with import from draw.io, Mermaid and Excalidraw.
49k GitHub starsUsed in 1 repo~7.6k tokens
DevelopmentAuto-check passed
Draw.io Diagram Studio
Agents365-ai/drawio-skill
Creates and edits editable draw.io diagrams from descriptions, code, infrastructure files, SQL and API schemas, with sync, review, test and export tools.
10k GitHub stars~2.4k tokensUpdated today
DevelopmentAuto-check: notes
Pretty Mermaid Renderer
imxv/Pretty-mermaid-skills
Writes and renders Mermaid diagrams as themed SVG, PNG or terminal ASCII and Unicode art with a bundled Node.js CLI that needs no browser.
1.5k GitHub stars~2k tokensUpdated 1 mo ago
DevelopmentAuto-check passed
Archify Diagram Builder
Unclecheng-li/AI_Animation
Builds validated architecture, workflow, sequence, data-flow and lifecycle diagrams as standalone interactive HTML from a small JSON spec, with optional motion and image export.
1.5k GitHub starsUsed in 2 repos~4.1k tokens
DevelopmentAuto-check passed
Mermaid
WH-2099/mermaid-skill
Generate Mermaid diagrams from user requirements. An agent skill from WH-2099/mermaid-skill.
288 GitHub starsUsed in 4 repos~958 tokens
DevelopmentAuto-check passed

Questions about Mermaid Check

What does Mermaid Check do?

检查并修复 zero2Agent 项目中 mermaid 图表的语法问题。当用户说"mermaid 渲染错误""图表语法检查""mermaid 不显示""flowchart 报错""检查 mermaid"时触发。也适用于用户提到某篇文章的 mermaid 图无法渲染、显示 syntax error 的场景。. Mermaid Check is an agent skill from ranxi2001/zero2Agent.

When should I use Mermaid Check?

Mermaid Check fits situations like: tasks that involve Diagrams.

How do I install Mermaid Check in Claude Code?

Run `npx skills add ranxi2001/zero2Agent --skill mermaid-check -a claude-code`. Or copy the skill folder (.agents/skills/mermaid-check in ranxi2001/zero2Agent) into .claude/skills/mermaid-check in your project. Claude Code loads it when a task matches its description.

How do I install Mermaid Check in Codex?

Run `npx skills add ranxi2001/zero2Agent --skill mermaid-check -a codex`. Or copy the skill folder (.agents/skills/mermaid-check in ranxi2001/zero2Agent) into .agents/skills/mermaid-check in your project. Codex loads it when a task matches its description.

Can I use Mermaid Check in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add ranxi2001/zero2Agent --skill mermaid-check -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/mermaid-check, .gemini/skills/mermaid-check, .github/skills/mermaid-check and .opencode/skills/mermaid-check in your project.

What does Mermaid Check need to run?

Going by SKILL.md and its folder, Mermaid Check needs the command-line tools its instructions call (npm, npx and python3). Our summary lists: Python 3; Node.js.

Does Mermaid Check access the network?

SKILL.md contains no URLs. Its commands use npm and npx, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Mermaid Check safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Mermaid Check use?

Mermaid Check is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Mermaid Check use?

About 1.4k tokens (SKILL.md is roughly 5.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Mermaid Check?

Skills that share tags, products or a category with Mermaid Check: Archify Diagrams (tt-a1i/archify, 82k stars), Diagram Design (cathrynlavery/diagram-design, 49k stars), Draw.io Diagram Studio (Agents365-ai/drawio-skill, 10k stars) and Pretty Mermaid Renderer (imxv/Pretty-mermaid-skills, 1.5k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Mermaid Check?

ranxi2001 (a GitHub user) maintains it in ranxi2001/zero2Agent, which has 715 GitHub stars. The repository holds 8 skills in this directory. The repository was last updated on October 10, 2026.

Source: ranxi2001/zero2Agent on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Mermaid Check

Facts

At a glance

What it does

When your agent uses it

Example prompts

Requirements

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Mermaid 语法检查与修复

渲染管线原理

关键函数 srcToInnerHTML

使用 Node.js 验证 mermaid 语法

常见 Bug 与修复方案

Bug 1：\n 在代码围栏中不是换行

Bug 2：Unicode 特殊符号导致 syntax error（已验证）

Bug 3：<div class="mermaid"> 中的 <br> 导致解析失败

Bug 4：div.textContent = src 破坏 entityDecode

Bug 5：主题切换后 mermaid 图表损坏

Bug 6：初始化时 mermaid 不根据当前主题渲染

Bug 7：subgraph 标题含特殊字符

Bug 8：edge label 含引号或特殊字符

检查流程

Step 1：扫描

Step 2：模式匹配检测

Step 3：验证

节点标签换行正确写法

Files

Compare with similar skills

Similar skills

More from ranxi2001/zero2Agent

Related

Questions about Mermaid Check

Bug 1：`\n` 在代码围栏中不是换行

Bug 3：`<div class="mermaid">` 中的 `<br>` 导致解析失败

Bug 4：`div.textContent = src` 破坏 entityDecode