用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/rcarmo/piclaw-addons --skill diagram-workflow命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
基于 SOC 职业分类
正在显示 SKILL.md
| name | diagram-workflow |
| description | Define, render, inject, and verify project architecture diagrams from JSON graph files. |
| distribution | public |
End-to-end architecture diagram pipeline: define a JSON graph → render SVG → inject into project markdown → rebuild site.
When creating or updating architecture diagrams for portfolio project pages.
bun runtimersvg-convert (for PNG previews, optional)scripts/ directoryEach diagram is a JSON file in _diagrams/{project-id}.json:
{
"title": "Caption below the diagram",
"nodes": [
{
"id": "unique-id",
"label": "Box label",
"sub": "Subtitle text"
| Tag | Use for |
|---|---|
web | frontends, browsers, UIs |
backend | servers, APIs, runtimes |
state | databases, stores, config |
artifacts | builds, files, models |
processing | engines, pipelines, transforms |
scripting | scripting, plugins, extensions |
infra | containers, VMs, infrastructure |
external | external services, APIs, providers |
input | user input, sources, triggers |
output | results, exports, destinations |
monitor | monitoring, logging, observability |
Tags control box colours consistently across all diagrams. Use "style": "box-accent" to override.
column (0-based, left-to-right) and row (0-based, top-to-bottom) control placementchildren get a dashed group container; children render as smaller boxes below the parentBOX_W"accent": true for the primary data flow path"color": "#hex" for custom arrow colours# New diagram
cat > _diagrams/my-project.json << 'EOF'
{ "title": "...", "nodes": [...], "edges": [...] }
EOF
bun scripts/diagram-render.ts _diagrams/my-project.json _diagrams/my-project.svg
The ## Diagram section in _content/my-project.md should contain the raw SVG.
Replace it with the rendered output:
# Or use convert-diagrams.ts for batch:
bun scripts/convert-diagrams.ts my-project
Or manually:
python3 -c "
import re
md = open('_content/my-project.md').read()
svg = open('_diagrams/my-project.svg').read()
md = re.sub(r'(## Diagram\s*\n)<svg[\s\S]*?</svg>', r'\1' + svg, md)
open('_content/my-project.md', 'w').write(md)
"
bun run build.ts
bun audit-links.ts
rsvg-convert -w 900 -o /tmp/preview.png _diagrams/my-project.svg
for f in _diagrams/*.json; do
bun scripts/diagram-render.ts "$f" "_diagrams/$(basename $f .json).svg"
done
# Then update all markdown files
python3 -c "
import re, os, glob
for md in sorted(glob.glob('_content/*.md')):
name = os.path.basename(md).replace('.md','')
svg_f = f'_diagrams/{name}.svg'
if not os.path.exists(svg_f): continue
content = open(md).read()
svg = open(svg_f).read()
content = re.sub(r'(## Diagram\s*\n)<svg[\s\S]*?</svg>', r'\1' + svg, content)
open(md, 'w').write(content)
"
bun scripts/convert-diagrams.ts # all projects
bun scripts/convert-diagrams.ts piku gi # specific projects
This parses rect+text elements from the existing SVG, groups them into nodes, extracts edges from paths, and auto-assigns semantic tags based on label keywords.