메뉴
专业架构图与流程图绘制 skill。绘制系统架构图、微服务架构、网络拓扑图、业务流程图、数据流图、时序图、状态机、ER图等。支持 show_widget 内联 SVG 渲染与 Mermaid 代码块两种方式。触发关键词：架构图、流程图、时序图、状态机、拓扑图、ER图、数据流图、draw、diagram、flowchart、architecture。
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/ZJU-REAL/HugAgentOS --skill diagram-builder명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
设计并创建一个子智能体，或改进一个已有的子智能体。当用户说"帮我建一个负责 X 的智能体"、"我想要个专门做 Y 的助手"、"把这套活儿交给一个专门的智能体"、"改一下我那个智能体的职责/能力/语气"、或问"这个智能体该怎么设计"时，务必使用本技能。它教你怎么切职责、怎么写 system_prompt、绑哪些能力、参数怎么定，然后通过 create_agent / edit_agent 工具落库。
从零攒一个插件包，或把一个 web 链接上的插件下载下来导入。当用户说"照着这个网页做个插件"、"把我这几个技能打包成插件"、"帮我做一个插件"、"这个链接的插件帮我装上"、或需要把一组配套的技能与工具打成可安装可卸载的整体时，务必使用本技能。它教你插件包的目录结构、plugin.json 怎么写、怎么自检、怎么通过 import_plugin 工具落库。
HugAgentOS 后端开发规范。当需要新增或修改后端代码（API路由、服务层、数据库模型、MCP工具等）时使用此 skill， 确保代码风格、分层架构、错误处理、响应格式等与项目现有规范保持一致。
SOC 직업 분류 기준
SKILL.md 표시 중
| name | diagram-builder |
| description | 专业架构图与流程图绘制 skill。绘制系统架构图、微服务架构、网络拓扑图、业务流程图、数据流图、时序图、状态机、ER图等。支持 show_widget 内联 SVG 渲染与 Mermaid 代码块两种方式。触发关键词：架构图、流程图、时序图、状态机、拓扑图、ER图、数据流图、draw、diagram、flowchart、architecture。 |
| agent_created | true |
本 skill 提供两种图表绘制方式：
read_me + show_widget 工具，在对话中直接渲染精美 SVG/HTML 图表。凡用户明确要求"绘制"、"画出"、"可视化"某类图表，或对话内容用图表呈现比文字更清晰时，优先使用此方式。
read_me，加载 diagram 模块（获取 CSS 变量、颜色、排版规则）。show_widget，传入原始 SVG 或 HTML 片段。<svg> 标签开头，viewBox 格式为 0 0 680 <height>，宽度固定 680px。<!DOCTYPE>、<html>、<head>、<body> 标签。参考 references/diagram-types.md，其中包含以下图表类型的 SVG 骨架与最佳实践：
read_me diagram 后按其 CSS 变量定义使用，保持整体一致性。font-family="sans-serif"。<marker> 定义 arrowhead，保持风格统一。<g> 元素对同类节点分组，复杂图表使用 <rect> 作为容器背景框。参考 references/svg-marker-guide.md 获取完整箭头定义规范。核心要点：
orient="auto" 会自动沿线的方向旋转，所以朝右的路径在竖线上会自然旋转为朝下。markerWidth 和 markerHeight 必须 ≥ viewBox 宽高，否则视口裁切会导致箭头只剩一半或方向错乱。refX 放到路径尖端 x 坐标、refY 放 y 中心，确保尖端精确对齐线尾。orient="auto" 会自动适配水平方向。参考 references/architecture-layout-guide.md 获取完整分层布局指南。核心要点：
stroke-dasharray 虚线圆角矩形包裹所有同层组件（标题条 + 子组件），左上角标注层号。当用户需要在文档中嵌入图表，或明确要求 Mermaid 语法时使用。
flowchart TD # 自上而下流程图
flowchart LR # 从左到右流程图
sequenceDiagram # 时序图
stateDiagram-v2 # 状态机
erDiagram # ER 图
classDiagram # 类图
gantt # 甘特图
graph # 通用图
参考 references/mermaid-cheatsheet.md 获取完整语法速查与示例模板。
| 用户意图 | 推荐方式 | 参考文件 |
|---|---|---|
| 系统/微服务架构图 | show_widget SVG | references/diagram-types.md |
| 业务流程 / 泳道图 | show_widget SVG 或 Mermaid flowchart | references/diagram-types.md |
| 时序图 | show_widget SVG 或 Mermaid sequenceDiagram | references/mermaid-cheatsheet.md |
| 状态机 | show_widget SVG 或 Mermaid stateDiagram-v2 | references/mermaid-cheatsheet.md |
| ER 图 | show_widget SVG 或 Mermaid erDiagram | references/mermaid-cheatsheet.md |
| 嵌入 Markdown 文档 | Mermaid 代码块 | references/mermaid-cheatsheet.md |