richdocs
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
Chineserichdocs — rich HTML companions for discovery docs
richdocs — 为发现文档提供富HTML伴生文档
Markdown stays the source of truth. This skill generates an HTML companion
that renders the same with higher fidelity — interactive graphs, tinted
provider icons, branded theming — and serves it reliably on localhost.
.mdMarkdown始终是唯一可信的内容源。本工具会生成HTML伴生文档,以更高保真度渲染相同的文件——包含交互式图形、着色服务商图标、品牌化主题——并可在本地主机上可靠提供服务。
.mdRoute by intent
按意图选择操作
| Intent | Do this |
|---|---|
| "Make an HTML version of DOC.md" | |
| "One file I can open / attach" | |
| "I need an AWS/GCP/Azure/K8s icon" | |
| "Build a custom SVG diagram with real icons" | read |
| "Interactive graph / chart in the doc" | fenced |
| "3D scene, colour-space study, or a map" | fenced |
| "Why is my palette not the palette I designed?" | |
| "HTML looks broken opened from Finder" | |
| "Render it in a brand theme" | default is |
| "Re-brand the output" | edit |
| "Override a theme for this project" | drop |
| "Add a new brand theme" | |
| "Is this theme readable?" | |
| "Show off / compare the themes" | |
| "Upgrade one of this repo's root docs" | read |
| 意图 | 操作方式 |
|---|---|
| "生成DOC.md的HTML版本" | 执行 |
| "生成可直接打开/附加的单文件" | 执行 |
| "需要AWS/GCP/Azure/K8s图标" | 执行 |
| "使用真实图标构建自定义SVG图" | 阅读 |
| "在文档中添加交互式图形/图表" | 使用 |
| "添加3D场景、色彩空间研究或地图" | 使用 |
| "为什么我的调色板不是设计好的样式?" | 在 |
| "从Finder打开HTML显示异常" | |
| "按品牌主题渲染" | 默认主题为 |
| "重新定制输出品牌风格" | 编辑输出目录中的 |
| "为当前项目覆盖主题" | 添加 |
| "添加新品牌主题" | 在 |
| "检查主题可读性" | 执行 |
| "展示/对比所有主题" | 执行 |
| "升级仓库根目录下的文档" | 阅读 |
Quickstart
快速入门
bash
undefinedbash
undefined1. Render a markdown doc into a rich HTML companion (multi-file, live mode)
1. 将Markdown文档渲染为富HTML伴生文档(多文件、实时模式)
uv run --no-project .claude/skills/richdocs/scripts/md2html.py TARGET_ARCHITECTURE.md
uv run --no-project .claude/skills/richdocs/scripts/md2html.py TARGET_ARCHITECTURE.md
2. Serve it (no-store headers, CDN libs load fine over http://localhost)
2. 启动服务(禁用缓存头,CDN库可通过http://localhost正常加载)
uv run --no-project .claude/skills/richdocs/scripts/serve.py tmp/richdocs --open
uv run --no-project .claude/skills/richdocs/scripts/serve.py tmp/richdocs --open
3. Or produce one self-contained file (no server needed)
3. 或生成单个自包含文件(无需服务器)
uv run --no-project .claude/skills/richdocs/scripts/md2html.py REVIEW.md --inline
uv run --no-project .claude/skills/richdocs/scripts/md2html.py REVIEW.md --inline
3b. Render in a brand theme (default is osakanights; pass --theme for another)
3b. 按品牌主题渲染(默认主题为osakanights;使用--theme指定其他主题)
uv run --no-project .claude/skills/richdocs/scripts/md2html.py DOC.md --theme v2ai
uv run --no-project .claude/skills/richdocs/scripts/md2html.py DOC.md --theme v2ai
4. Grab a tinted provider icon
4. 获取着色后的服务商图标
uv run --no-project .claude/skills/richdocs/scripts/stencil.py search lambda
uv run --no-project .claude/skills/richdocs/scripts/stencil.py extract "mxgraph.aws4/lambda"
--color '#ED7100' --out diagrams/lambda.svg
--color '#ED7100' --out diagrams/lambda.svg
Run everything from the repo root. Never `cd`.uv run --no-project .claude/skills/richdocs/scripts/stencil.py search lambda
uv run --no-project .claude/skills/richdocs/scripts/stencil.py extract "mxgraph.aws4/lambda"
--color '#ED7100' --out diagrams/lambda.svg
--color '#ED7100' --out diagrams/lambda.svg
所有操作需在仓库根目录执行,请勿切换目录。Mermaid gate (mandatory before rendering)
Mermaid检查(渲染前必须执行)
Any doc containing fences MUST pass this skill's vendored
parse + contrast gates on the source markdown, before :
```mermaidmd2html.pybash
bun run .claude/skills/richdocs/vendor/mermaidjs-diagrams/scripts/mermaid_complexity.ts SOURCE.md
bun run .claude/skills/richdocs/vendor/mermaidjs-diagrams/scripts/mermaid_contrast.ts SOURCE.mdFirst run only: .
bun install --cwd .claude/skills/richdocs/vendor/mermaidjs-diagrams/scripts --frozen-lockfileNon-zero exit is a blocker — means the
fence is invalid mermaid and will render as a broken block in the companion.
passes fences through verbatim; it cannot catch this for you.
The vendored documents both tools in
full (profiles, complexity presets, authoring pitfalls like quoted mindmap
labels and HTML entities). Prior adjudications on this class of failure live
in — treat them as already-decided, don't re-litigate.
ParserFailure … yielded 0 nodesmd2html.pyvendor/mermaidjs-diagrams/SKILL.mdresources/learned/任何包含代码块的文档,在执行前,必须通过本工具内置的解析+对比度检查,针对源Markdown文件:
```mermaidmd2html.pybash
bun run .claude/skills/richdocs/vendor/mermaidjs-diagrams/scripts/mermaid_complexity.ts SOURCE.md
bun run .claude/skills/richdocs/vendor/mermaidjs-diagrams/scripts/mermaid_contrast.ts SOURCE.md首次运行需执行:。
bun install --cwd .claude/skills/richdocs/vendor/mermaidjs-diagrams/scripts --frozen-lockfile非零退出码表示检查不通过——意味着代码块是无效的Mermaid语法,在伴生文档中会显示为损坏的块。会直接传递代码块,无法为你捕获此类错误。内置的详细说明了这两个工具(配置文件、复杂度预设、编写陷阱如带引号的思维导图标签和HTML实体)。此前关于此类错误的判定记录在目录下——请直接遵循已有判定,无需重新讨论。
ParserFailure … yielded 0 nodesmd2html.pyvendor/mermaidjs-diagrams/SKILL.mdresources/learned/Command reference
命令参考
showcase.py [--theme NAME] [--out DIR]
showcase.py [--theme NAME] [--out DIR]showcase.py [--theme NAME] [--out DIR]
showcase.py [--theme NAME] [--out DIR]Emits a theme showcase exercising the full brand surface: colour ramps, the glyph
disambiguation gate, type specimens, components, Plotly charts, a Cytoscape graph,
Mermaid, and architecture diagrams built from the stencil pack.
- no — a gallery: every installed brand, with a brand switcher and a light/dark toggle. Each brand honours its own
--themewhen selected.defaultTheme - — that brand alone: no switcher, and no other brand's tokens or CSS anywhere in the file. Safe to hand to a client.
--theme NAME
Architecture SVGs carry their source in a attribute, so
"Download editable SVG" / "Download .drawio" re-open in diagrams.net as real AWS
shapes rather than a flat image.
mxfilecontentbash
uv run --no-project .claude/skills/richdocs/scripts/showcase.py # gallery
uv run --no-project .claude/skills/richdocs/scripts/showcase.py --theme osakanights # one brand生成主题展示页面,全面展示品牌特性:色彩渐变、图标区分检查、字体样本、组件、Plotly图表、Cytoscape图形、Mermaid图,以及使用模板包构建的架构图。
- 不指定——生成画廊:展示所有已安装品牌,包含品牌切换器和明暗模式切换。每个品牌被选中时会遵循自身的
--theme设置。defaultTheme - 指定——仅展示该品牌:无切换器,文件中不包含其他品牌的令牌或CSS。可安全交付给客户。
--theme NAME
架构SVG文件会在属性中携带源,因此“下载可编辑SVG”/“下载.drawio”文件可在diagrams.net中重新打开为真实的AWS形状,而非扁平图像。
contentmxfilebash
uv run --no-project .claude/skills/richdocs/scripts/showcase.py # 生成画廊
uv run --no-project .claude/skills/richdocs/scripts/showcase.py --theme osakanights # 仅展示指定品牌md2html.py DOC.md [--out DIR] [--inline] [--theme NAME] [--tokens FILE] [--title T]
md2html.py DOC.md [--out DIR] [--inline] [--theme NAME] [--tokens FILE] [--title T]md2html.py DOC.md [--out DIR] [--inline] [--theme NAME] [--tokens FILE] [--title T]
md2html.py DOC.md [--out DIR] [--inline] [--theme NAME] [--tokens FILE] [--title T]-
— a named brand theme. Supplies both the brandpack (
--theme NAME) and itsdesign-tokens.json— which is the only place a webfont can actually betheme.cssed and a display face assigned to headings. A brandpack alone cannot do either. Overrides@import. An unknown name fails loudly and lists what is installed. Run--tokensto see the current set.--help- Default theme is — a plain
osakanightsrenders branded, not neutral. Passmd2html.py DOC.mdfor a different brand, or--theme NAME(with no--tokens FILE) for the raw-brandpack escape hatch.--theme - Themes resolve from two roots, project first: (optional project overrides, run from repo root) then the skill's built-in
tmp/richdocs/theme/<name>/. A project theme shadows the built-in of the same name and can add project-only themes. With no override dir the skill is the built-in set only — fully self-contained.resources/themes/<name>/
- Default theme is
-
Multi-file (default,=
--out) — writestmp/richdocsplus a copy of the<stem>.htmland.md. The HTML fetches the paired markdown at runtime (design-tokens.json,?v=<BUILD_ID>) and renders client-side. Edit the copiedcache: no-store, refresh the browser: live authoring loop. Requires.md—serve.pyblocks fetch by design.file:// -
— one self-contained HTML with the markdown embedded on
--inlineand tokens onwindow.__DOC_MD__. Opens overwindow.__DOC_TOKENS__. Network still needed for the pinned CDN libraries.file:// -
— raw-brandpack escape hatch (see schema in
--tokens FILE). Applies only when passed andresources/rich-blocks.mdis not; otherwise the default--themetheme wins.osakanights
-
——指定品牌主题。同时提供品牌包(
--theme NAME)和对应的design-tokens.json——这是唯一可theme.css网页字体并为标题指定显示字体的地方。仅使用品牌包无法实现上述功能。该参数会覆盖@import。如果指定的主题名称不存在,会报错并列出已安装的主题。执行--tokens查看当前可用主题列表。--help- 默认主题为——直接执行
osakanights会渲染为品牌化样式,而非中性样式。执行md2html.py DOC.md切换其他品牌,或不指定--theme NAME仅使用--theme(原始品牌包应急方案)。--tokens FILE - 主题从两个目录加载,优先项目目录:(可选的项目覆盖目录,需在仓库根目录执行),然后是工具内置的
tmp/richdocs/theme/<name>/。项目主题会覆盖同名内置主题,并可添加项目专属主题。如果没有覆盖目录,则仅使用工具内置主题——完全自包含。resources/themes/<name>/
- 默认主题为
-
多文件模式(默认,=
--out) ——生成tmp/richdocs文件,同时复制对应的<stem>.html和.md文件。HTML会在运行时获取配对的Markdown文件(design-tokens.json,?v=<BUILD_ID>)并在客户端渲染。编辑复制后的cache: no-store文件,刷新浏览器即可实现实时编辑循环。需要使用.md——serve.py协议会阻止资源获取。file:// -
——生成单个自包含HTML文件,Markdown内容嵌入在
--inline中,令牌嵌入在window.__DOC_MD__中。可通过window.__DOC_TOKENS__打开。仍需网络连接加载固定CDN库。file:// -
——原始品牌包应急方案(详见
--tokens FILE中的 schema)。仅当指定该参数**且未指定resources/rich-blocks.md**时生效;否则默认使用--theme主题。osakanights
Reporting a generated doc (worktree-aware)
报告生成的文档(支持工作树)
md2html.py── richdoc output ──.md.htmlserve.pypython3 -m http.server <port> --directory <abs-dir>md2html.py── richdoc output ──.md.htmlserve.pypython3 -m http.server <port> --directory <abs-dir>serve.py [DIR] [--port 8642] [--open]
serve.py [DIR] [--port 8642] [--open]serve.py [DIR] [--port 8642] [--open]
serve.py [DIR] [--port 8642] [--open]Serves DIR (default ) on with on every response, so a browser refresh always re-fetches fresh
markdown/JSON. Busy port and missing dir fail loudly. launches the
browser. This is the answer to "reliably serve localhost HTML that pulls
Tailwind / Google Fonts / Cytoscape / deck.gl / plotly / mermaid" — third-party
CDNs load fine over ; only breaks fetch.
tmp/richdocs127.0.0.1Cache-Control: no-store--openhttp://localhostfile://在上提供DIR目录的服务(默认),所有响应均带有头,因此浏览器刷新时总会重新获取最新的Markdown/JSON文件。端口被占用或目录不存在时会报错。参数会启动浏览器。这是“可靠提供可加载Tailwind / Google Fonts / Cytoscape / deck.gl / plotly / mermaid的本地HTML服务”的解决方案——第三方CDN可通过正常加载;仅协议会阻止资源获取。
127.0.0.1tmp/richdocsCache-Control: no-store--openhttp://localhostfile://stencil.py packs | list | search | extract
stencil.py packs | list | search | extractstencil.py packs | list | search | extract
stencil.py packs | list | search | extractVendored draw.io stencil library (, thousands of
provider icons keyed , packs: , ,
, , ).
assets/stencils.json.zip"<pack>/<name>"mxgraph.aws4mxgraph.gcp2mxgraph.azuremxgraph.mscae*mxgraph.kubernetes*bash
stencil.py packs # pack prefixes + counts
stencil.py list --pack mxgraph.gcp2 --limit 40
stencil.py search "cloud run"
stencil.py extract "mxgraph.aws4/lambda" --color '#ED7100' --size 64 --out lambda.svgEvery stencil paints ; tints by string-replace (works
in every renderer). Omit and the SVG inherits its parent's
— ideal for inlining into themed HTML. Unknown ID exits 1 with
close-match suggestions.
currentColor--color--colorcolor内置draw.io模板库(,包含数千个服务商图标,键为,包包括:, , , , )。
assets/stencils.json.zip"<pack>/<name>"mxgraph.aws4mxgraph.gcp2mxgraph.azuremxgraph.mscae*mxgraph.kubernetes*bash
stencil.py packs # 列出包前缀及图标数量
stencil.py list --pack mxgraph.gcp2 --limit 40
stencil.py search "cloud run"
stencil.py extract "mxgraph.aws4/lambda" --color '#ED7100' --size 64 --out lambda.svg所有模板均使用着色;参数通过字符串替换实现着色(适用于所有渲染器)。省略参数时,SVG会继承父元素的——非常适合嵌入到主题化HTML中。如果指定的ID不存在,会退出并返回1,同时提供近似匹配的建议。
currentColor--color--colorcolorFenced rich blocks (in the rendered markdown)
富代码块(在渲染后的Markdown中)
Beyond standard markdown + , the HTML companion renders:
```mermaidmarkdown
```cytoscape
{ "elements": [ {"data": {"id": "a", "label": "API"}},
{"data": {"id": "b", "label": "DB"}},
{"data": {"source": "a", "target": "b"}} ],
"height": 420 }
```
```plotly
{ "data": "cost_series.json" }
```- Payload is either inline JSON or — the external file is fetched with cache-busting: the data-driven mode. Generate the
{ "data": "relative/path.json" }from real sources (terraform plan, dbt manifest, pricing API) and the doc stays current on refresh..json - Canvas colours come from (
design-tokens.json,canvas.cytoscape.*), never CSS — canvases can't read CSS variables. Theme toggle re-feeds the palette and re-renders.canvas.plotly.* - Full block contract + token schema: .
resources/rich-blocks.md
除标准Markdown + 外,HTML伴生文档还支持渲染:
```mermaidmarkdown
```cytoscape
{ "elements": [ {"data": {"id": "a", "label": "API"}},
{"data": {"id": "b", "label": "DB"}},
{"data": {"source": "a", "target": "b"}} ],
"height": 420 }
```
```plotly
{ "data": "cost_series.json" }
```- payload可以是内联JSON或——外部文件会通过缓存破坏机制获取:即数据驱动模式。从真实数据源(terraform计划、dbt清单、定价API)生成
{ "data": "relative/path.json" }文件,刷新页面即可保持文档内容最新。.json - 画布颜色来自(
design-tokens.json,canvas.cytoscape.*),而非CSS——画布无法读取CSS变量。切换主题时会重新加载调色板并重新渲染。canvas.plotly.* - 完整的代码块规范+令牌schema:详见。
resources/rich-blocks.md
Cross-cutting conventions
通用约定
- Escalators, not stairs: a missing hard requirement (input file, busy port, unknown stencil id) crashes loudly with the reason. No silent skips.
- Determinism: same input → same output modulo . Cache-bust every runtime fetch with
{{BUILD_ID}}.?v=<BUILD_ID> - Inline-embed safety: anything embedded in a escapes
<script>as</— a stray<\/in doc content must not terminate the tag.</script> - Brandpack is data, not code: re-skin = edit in the output dir and refresh.
design-tokens.jsonbaked into the JS is a soft-fail net only, never the source of truth.FALLBACK_TOKENS - Outputs land in project-local (gitignored), never system
tmp/richdocs/./tmp - Authored prose follows the global-audience standard: when this skill writes prose (showcase copy, UI/error strings, its own docs, or a discovery doc it is asked to upgrade), apply resources/prose-style.md: no em-dash, Australian English, short coherent clauses, inclusive language, standardised vocabulary. The user's canonical markdown is rendered as written, never silently corrected.
- 直接报错,不静默跳过:缺少硬依赖(输入文件、端口被占用、未知模板ID)时会直接报错并说明原因。不会静默跳过。
- 确定性:相同输入→相同输出(除外)。所有运行时获取均使用
{{BUILD_ID}}实现缓存破坏。?v=<BUILD_ID> - 内联嵌入安全:任何嵌入到中的内容都会将
<script>转义为</——文档内容中的<\/不会终止脚本标签。</script> - 品牌包是数据,而非代码:重新定制样式只需编辑输出目录中的并刷新页面。JS中内置的
design-tokens.json仅作为软失败保障,并非可信源。FALLBACK_TOKENS - 输出文件存放在项目本地的目录(已加入.gitignore),而非系统
tmp/richdocs/目录。/tmp - 编写的文案遵循全球受众标准:当本工具编写文案时(展示页面内容、UI/错误字符串、自身文档,或被要求升级的发现文档),需遵循resources/prose-style.md:不使用破折号、使用澳大利亚英语、短句连贯、包容性语言、标准化词汇。用户的原始Markdown内容会按原样渲染,不会被自动修正。
Resources
资源
| File | Content |
|---|---|
| Localhost serving contract, pinned CDN table (Tailwind, fonts, cytoscape, deck.gl, plotly, mermaid), |
| Stencil pack schema, tint mechanism, registry pattern, composing full custom SVG diagrams from icons |
| Fenced block contract, design-tokens schema, two-palette (chrome vs canvas) theming |
| Recipes for upgrading each discovery-doc archetype (diagram-driven, table-driven, prose review) to rich HTML |
| Global-audience standard for prose this skill authors: no em-dash, Australian English, short clauses, inclusive language, standardised vocabulary (self-contained copy) |
| No-store localhost server |
| Stencil library query/extract CLI |
| Paired markdown → rich HTML generator |
| Vendored draw.io icon library (see |
| Default neutral brandpack |
| Vendored mermaid toolchain: parse/complexity gate, WCAG contrast gate, color-theming references, render script |
| Prior adjudications and self-taught facts — read before re-litigating |
richdocs is self-contained: every tool and reference it operates with lives
inside this skill directory. Never point runtime instructions at another
skill's files.
| 文件 | 内容 |
|---|---|
| 本地服务规范、固定CDN列表(Tailwind、字体、cytoscape、deck.gl、plotly、mermaid)、 |
| 模板包schema、着色机制、注册表模式、使用图标构建完整自定义SVG图的方法 |
| 富代码块规范、设计令牌schema、双调色板(界面元素 vs 画布)主题机制 |
| 将不同类型发现文档(图表驱动、表格驱动、评审文案)升级为富HTML的指南 |
| 本工具编写文案的全球受众标准:不使用破折号、澳大利亚英语、短句、包容性语言、标准化词汇(自包含文案) |
| 禁用缓存的本地服务器 |
| 模板库查询/提取CLI |
| Markdown→富HTML配对生成工具 |
| 内置draw.io图标库(详见 |
| 默认中性品牌包 |
| 内置Mermaid工具链:解析/复杂度检查、WCAG对比度检查、颜色主题参考、渲染脚本 |
| 此前的判定记录和经验总结——重新讨论前请先阅读 |
richdocs是自包含工具:其运行所需的所有工具和参考文档均位于本工具目录内。切勿在运行时指向其他工具的文件。