Skip to content
Agentmart
Submit a tool

专业图表设计

生成高质量架构图、UML、ER 图、用户旅程图，输出 HTML/SVG，含品牌配色与无障碍对比度校验，可导入 Mermaid/Excalidraw。适配自 cathrynlavery/diagram-design。

Skill by wch887292

IndexedApache-2.0★ 2
Write a review

Install

Works with Claude Code, Claude apps, Codex, Cursor, Gemini CLI, GitHub Copilot, VS Code, OpenCode, Goose, Windsurf. Read the repository before you give any tool access to your data.

npx agentmarket install skill/wch887292-fde437

Asks which of your tools to add it to (Claude Code, Codex, Cursor, VS Code, Windsurf, Gemini CLI, Claude Desktop) and shows the change first. See https://agentmart.dev/cli.

Get the weekly diff

The weekly diff: one email a week with new agent tools, notable updates and grade changes, plus security alerts for tools you follow. Double opt-in, one-click unsubscribe.

We use your email only for this newsletter. Privacy

About

生成高质量架构图、UML、ER 图、用户旅程图，输出 HTML/SVG，含品牌配色与无障碍对比度校验，可导入 Mermaid/Excalidraw。适配自 cathrynlavery/diagram-design。

Use cases: design, frontend

Reviews

Write a review

No reviews yet. Installed it? Reviews come from verified installers only. How reviews work

Permissions

What this skill can do and what it asks for, from its SKILL.md. Checked Oct 25, 2026.

Tools
No tools found
Secrets
None asked for
Install scripts
None found

Network hosts it talks to 1

  • codeload.github.com · found in install command

Files it touches

  • ~/.claude/skills/diagram-design

What's inside

Skill name
专业图表设计
Description
生成高质量架构图、UML、ER 图、用户旅程图，输出 HTML/SVG，含品牌配色与无障碍对比度校验，可导入 Mermaid/Excalidraw。适配自 cathrynlavery/diagram-design。
License
Apache-2.0
Instructions
32 lines in SKILL.md · view on GitHub

Agent Skills spec issues

  • name: only lowercase letters, digits and single hyphens allowed
  • name: "专业图表设计" does not match folder "diagram-design"

Files (1)

  • SKILL.md

SKILL.md (first lines)

# 专业图表设计（Diagram Design）

> 上游项目：https://github.com/cathrynlavery/diagram-design

## 触发
当用户需要：系统/软件架构图、UML 类图/时序图、ER 实体关系图、用户旅程图、流程图；且要求"能用、好看、可直接放进文档/博客"时使用。

## 执行步骤
1. 确认图表类型与用途：架构 / UML / ER / 用户旅程 / 流程。
2. 选定输出载体：优先 HTML/SVG（可交互、矢量清晰）；如需二次编辑，同步导出 Mermaid 或 Excalidraw 源。
3. 内容设计：梳理节点、关系、层次与流向，避免过度复杂（超过 ~7±2 个主节点时分层）。
4. 视觉规范：
   - 配色贴合品牌主色；文本与背景对比度满足 WCAG AA（≥4.5:1）。
   - 字号/间距统一，尺寸可量化；画幅变化后重算布局。
5. 校验：检查对比度、重叠、可读性、语义标签；SVG 可点击元素加 title/aria。
6. 交付：输出可直接内嵌文档/博客的 HTML/SVG 文件。

## 输出格式
```
图类型：<架构/UML/ER/用户旅程/流程>
载体：<HTML | SVG | Mermaid | Excalidraw>
节点数：N   关系数：N
配色：<主色清单 + 对比度结论>
校验结果：<可读性/对比度/重叠>
交付物：<文件路径 或 嵌入代码>
```

## 边界
- 数据不充足时标注为占位，不臆造节点。
- 不把纯文本硬塞进图；复杂信息先用文字分层再入图。

From wch887292/feihong-code, Apache-2.0.

More from wch887292/feihong-code

Signals

Stars
2
Forks
0
Open issues
0
Last commit (this folder)
Oct 16, 2026 (12 days ago)
Last release
Oct 22, 2026 (5 days ago)

From GitHub (fetched Oct 24, 2026).

Details

License
Apache-2.0
Repository
github.com/wch887292/feihong-code
Website
www.klai.top
First seen
Oct 24, 2026
Last checked
Oct 24, 2026
Source
GitHubgithub-graphql

More from wch887292

Cite this page

专业图表设计 skill. Agent Mart. https://agentmart.dev/skills/wch887292-fde437 (last updated 2026-10-24)