# Excalidraw Diagram As Code

> Excalidraw Diagram-as-Code（流程图自动生成）

- Skill: `yangyuchen-work/excalidraw-diagram-as-code` (Agent Skill)
- Install (CLI): `npx skillmds@latest add yangyuchen-work/excalidraw-diagram-as-code`
- Raw SKILL.md: https://api.skillmd.com/api/skills/yangyuchen-work/excalidraw-diagram-as-code/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: YangYuChen-Work (https://skillmd.com/u/yangyuchen-work)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/yangyuchen-work/excalidraw-diagram-as-code

---


# Excalidraw Diagram-as-Code（流程图自动生成）

## 适用场景
# Excalidraw Diagram-as-Code（流程图自动生成）；- 让图文产出可以纳入自动化链路（文档、周报、汇报）。

## 功能说明
# Excalidraw Diagram-as-Code（流程图自动生成）

> 让 OpenClaw 直接生成 Excalidraw JSON，把“说需求”变成“出图”。

## 这个案例能帮你做什么

- 把抽象流程描述快速转成可视化图示。
- 降低手工画流程图时间，适合方案沟通和评审。
- 让图文产出可以纳入自动化链路（文档、周报、汇报）。

## 你需要的 Skills（按类型）

| 类型 | Skill / 工具 | 用途 | 来源 |
|---|---|---|---|
| 外部 | `Excalidraw JSON` | 图形数据结构 | Excalidraw |
| 内置 | `OpenClaw 对话编排` | 将文本需求转成图结构 | OpenClaw Built-in |

## 快速体验版（先跑一轮）

1. 给出一个 5 步以内的小流程（例如“需求→开发→测试→发布→复盘”）。
2. 让 OpenClaw 生成对应的 Excalidraw JSON。
3. 在 Excalidraw 打开并检查节点命名与连线。

```text
请根据以下流程生成 Excalidraw JSON：
1) 需求确认
2) 方案设计
3) 开发实现
4) 测试验收
5) 上线复盘
要求：
- 节点命名简洁
- 有清晰方向箭头
- 标注关键决策点
```

## 稳定自动版（可长期运行）

### 推荐流程

1. 把常用图模板（架构图、流程图、决策树）固化为提示词模板。
2. 文档更新时同步生成新版图。
3. 将“文本变更”与“图变更”一起纳入版本管理。

## 成功标准
- 常见流程可在几分钟内自动出图。
- 图中节点与文档术语一致。
- 方案变更后能稳定生成新版图。

## 源文件
来源：awesome-openclaw-zh  
原始文件：02-excalidraw-diagram-as-code.md