Agent Skills › iflytek/skillhub › diagram-maker

diagram-maker

GitHub

用于生成各类图表的 Skill，支持 clean-svg、architecture-svg 和 Excalidraw 三种模式。涵盖概念、架构、流程等场景，输出独立 SVG/HTML 或可编辑白板文件，注重布局与规范。

builtin-skills/skills/diagram-maker/SKILL.md iflytek/skillhub

Trigger Scenarios

需要创建架构图或流程图用户要求生成 SVG 或 Excalidraw 图表

Install

npx skills add iflytek/skillhub --skill diagram-maker -g -y

More Options

Non-standard path

npx skills add https://github.com/iflytek/skillhub/tree/main/builtin-skills/skills/diagram-maker -g -y

Use without installing

npx skills use iflytek/skillhub@diagram-maker

指定 Agent (Claude Code)

npx skills add iflytek/skillhub --skill diagram-maker -a claude-code -g -y

安装 repo 全部 skill

npx skills add iflytek/skillhub --all -g -y

预览 repo 内 skill

npx skills add iflytek/skillhub --list

SKILL.md

Frontmatter

{
    "name": "diagram-maker",
    "license": "MIT",
    "version": "1.0.0",
    "description": "Create standalone SVG\/HTML or editable Excalidraw diagrams for concepts, architecture, processes, flows, and whiteboards."
}

Diagram Maker

Create diagrams as artifacts, not prose. Choose one output mode:

clean-svg: educational concepts, physical systems, processes, lifecycle, simple data flow.
architecture-svg: software/cloud/infra topology, services, databases, queues, trust zones.
excalidraw: editable hand-drawn whiteboard, flowchart, sequence, architecture sketch.

Routing

User wants editable/collaborative: choose Excalidraw.
User wants polished standalone browser output: choose SVG/HTML.
Software architecture with infra components: choose architecture SVG.
Science, product, process, concept map, physical object: choose clean SVG.
Unsure: ask one short question only if output format matters; otherwise choose clean SVG.

Workflow

Extract nodes, groups, labels, and directed relationships.
Pick layout first: left-to-right, top-down, hub-spoke, swimlanes, layered stack, sequence.
Keep labels short. Prefer 5-9 main elements over dense diagrams.
Generate the file at the requested path. If none is provided, use diagram.html or diagram.excalidraw in the current working directory.
Do not overwrite an existing file by default. Choose an unused suffixed name such as diagram-2.html, or ask before replacing the existing file.
Verify syntax by opening or parsing the output when feasible.

SVG/HTML rules

Single standalone .html file with inline CSS and inline SVG.
No external fonts, JS, images, gradients, glows, decorative blobs, or remote assets.
Use semantic colors, not rainbow sequences: neutral, input, process, storage, external, risk.
Draw connectors before nodes so arrows sit behind boxes.
Every connector path has fill="none" and a marker arrow when directed.
Leave 24px text padding inside boxes; do not let text touch borders.
Legend only when symbols/colors are not obvious.

SVG template

Use references/svg-template.md as the wrapper and replace .

Excalidraw rules

Save .excalidraw JSON with type, version, source, elements, and appState.
Use bound text for shape labels. Do not use a nonstandard label property.
Keep bound text immediately after its container in the elements array.
Minimum labeled shape: 120x60. Minimum body text: 16px.
Use roughness 1, fontFamily: 1, and simple fills.