design-md

在 Markdown 文档里插入脑图或架构图。用户说"画个脑图"、"画架构图"、"插入图表"、"mind map"、"diagram"时触发。

Safety Notice

This listing is from the official public ClawHub registry. Review SKILL.md and referenced scripts before running.

Copy this and send it to your AI assistant to learn

Install skill "design-md" with this command: npx skills add drunkpig/mddoc-design

向 Markdown 文档插入图表时,始终遵循以下规则。

依赖检查

开始任何操作前,先检查依赖是否已安装:

which mddoc && which d2

mddoc 未安装:

npm install -g mddoc-cli

d2 未安装:

两个都就绪后再继续。

规则

  • 所有图表源文件和 PNG 只放在 .mddoc/ 目录(与 Markdown 文件平级)
  • 文件名用英文小写 + 连字符auth-flowmodule-overview),不用中文或序号
  • 先写源文件,再生成 PNG,再插入 Markdown,顺序不可颠倒
  • Markdown 正文中永远不要直接写 D2 或 markmap 代码块
  • .mddoc/ 不存在时先创建

脑图(.mmd)

1. 写源文件.mddoc/<name>.mmd,格式为 markmap markdown:

# 根节点标题

## 一级分支
- 叶节点
- 叶节点

## 一级分支
- 叶节点
  - 二级叶节点

2. 生成 PNG:

mddoc mindmap .mddoc/<name>.mmd

3. 插入 Markdown:

![脑图:<描述>](.mddoc/<name>.png)
*源文件:[<name>.mmd](.mddoc/<name>.mmd)*

架构图(.d2)

1. 写源文件.mddoc/<name>.d2,格式为 D2 语言:

direction: right

client: 客户端 {shape: rectangle}
gateway: API Gateway {shape: rectangle}
db: Database {shape: cylinder}

client -> gateway -> db

2. 生成 PNG:

mddoc arch .mddoc/<name>.d2

3. 插入 Markdown:

![架构图:<描述>](.mddoc/<name>.png)
*源文件:[<name>.d2](.mddoc/<name>.d2)*

批量重新生成

mddoc build

反馈与问题

遇到问题或有建议,请到 GitHub 提 issue: https://github.com/drunkpig/md-of-programer/issues

Source Transparency

This detail page is rendered from real SKILL.md content. Trust labels are metadata-based hints, not a safety guarantee.

Related Skills

Related by shared tags or category signals.

General

Huo15 Openclaw Enhance

火一五·克劳德·龙虾增强插件 v5.7.8 — 全面适配 openclaw 2026.4.24:peerDep ^4.24 + build/compat 同步到 4.24 + 14 处 api.on 全部去掉 as any 改成 typed hook(hookName 联合类型 + handler 自动推断 Pl...

Registry SourceRecently Updated
General

Content Trend Analyzer

Aggregates and analyzes content trends across platforms to identify hot topics, user intent, content gaps, and generates data-driven article outlines.

Registry SourceRecently Updated
General

Prompt Debugger

Debug prompts that produce unexpected AI outputs — diagnose failure modes, identify ambiguity and conflicting instructions, test variations, compare model re...

Registry SourceRecently Updated
General

Indie Maker News

独行者 Daily - 变现雷达。读对一条新闻,少走一年弯路。每天5分钟,给创业者装上商业雷达。聚焦一人公司、副业、创业变现资讯,智能分类,行动导向。用户下载即能用,无需本地部署!

Registry SourceRecently Updated