名称： Excalidraw 流程图
slug: excalidraw-flowchart
版本： 1.1.0
描述： 根据描述创建 Excalidraw 流程图。当用户要求“创建流程图”、“绘制图表”、“可视化流程”、“制作流程图”、“架构图”或讨论工作流/流程可视化时使用。支持 DSL、DOT/Graphviz 和 JSON 格式。
repo: https://github.com/swiftlysingh/excalidraw-skill

Excalidraw 流程图技能

创建专业的流程图和图表，生成可在 Excalidraw 中打开的 .excalidraw 文件。

使用场景

• 用户要求创建流程图或图表
• 用户希望可视化某个流程或工作流
• 用户需要绘制架构图
• 用户提及“excalidraw”或“流程图”
• 用户需要记录决策树

前置条件

必须安装 @swiftlysingh/excalidraw-cli 工具：

npm install -g @swiftlysingh/excalidraw-cli

或者使用 npx（无需安装）：

npx @swiftlysingh/excalidraw-cli create --inline "DSL" -o output.excalidraw

如何创建流程图

步骤 1：分析请求

从用户描述中识别：
- 主要步骤/节点是什么？
- 决策点在哪里？
- 流程方向如何？
- 是否存在循环或分支？

步骤 2：编写 DSL

使用以下 DSL 语法描述流程图：

DSL 指令

步骤 3：生成文件

运行 CLI 命令创建 .excalidraw 文件：

npx @swiftlysingh/excalidraw-cli create --inline "你的DSL内容" -o flowchart.excalidraw

对于多行 DSL，可以使用 heredoc：

npx @swiftlysingh/excalidraw-cli create --inline "$(cat <<'EOF'
(开始) -> [步骤 1] -> {决策?}
{决策?} -> "是" -> [步骤 2] -> (结束)
{决策?} -> "否" -> [步骤 3] -> [步骤 1]
EOF
)" -o flowchart.excalidraw

步骤 4：告知用户

告知用户：
1. 文件已在指定路径创建
2. 可在 Excalidraw (https://excalidraw.com) 中通过“文件 > 打开”打开
3. 如有需要，可在 Excalidraw 中进一步编辑

DSL 示例

简单线性流程

(开始) -> [初始化] -> [处理数据] -> [保存结果] -> (结束)

决策树

(开始) -> [接收请求] -> {已认证?}
{已认证?} -> "是" -> [处理请求] -> (成功)
{已认证?} -> "否" -> [返回 401] -> (结束)

循环/重试模式

(开始) -> [尝试操作] -> {成功?}
{成功?} -> "是" -> [继续] -> (结束)
{成功?} -> "否" -> {重试次数 < 3?}
{重试次数 < 3?} -> "是" -> [增加计数器] -> [尝试操作]
{重试次数 < 3?} -> "否" -> [记录失败] -> (错误)

多分支流程

(用户输入) -> {输入类型?}
{输入类型?} -> "文本" -> [解析文本] -> [处理]
{输入类型?} -> "文件" -> [读取文件] -> [处理]
{输入类型?} -> "URL" -> [获取 URL] -> [处理]
[处理] -> [输出结果] -> (完成)

包含数据库

[API 请求] -> {缓存命中?}
{缓存命中?} -> "是" -> [[读取缓存]] -> [返回数据]
{缓存命中?} -> "否" -> [[查询数据库]] -> [[更新缓存]] -> [返回数据]

CLI 选项

• -o, --output <文件> - 输出文件路径（默认：flowchart.excalidraw）
• -f, --format <类型> - 输入格式：dsl、json、dot（默认：自动检测）
• -d, --direction <TB|BT|LR|RL> - 流程方向（默认：TB，从上到下）
• -s, --spacing <数字> - 节点间距（像素，默认：50）
• --inline <dsl> - 内联 DSL/DOT 字符串
• --stdin - 从标准输入读取
• --verbose - 详细输出

带选项的示例：

npx @swiftlysingh/excalidraw-cli create --inline "[A] -> [B] -> [C]" --direction LR --spacing 80 -o horizontal-flow.excalidraw

DOT/Graphviz 格式（v1.1.0 新增）

CLI 现已支持 DOT/Graphviz 格式创建图表。这对于处理现有的 DOT 文件或偏好 DOT 语法非常有用。

DOT 语法

digraph {
    rankdir=LR

    start [shape=ellipse label="开始"]
    process [shape=box label="处理数据"]
    decision [shape=diamond label="有效?"]
    end [shape=ellipse label="结束"]

    start -> process
    process -> decision
    decision -> end [label="是"]
    decision -> process [label="否" style=dashed]
}

支持的 DOT 特性

使用 DOT 文件

# 从文件（通过 .dot 或 .gv 扩展名自动检测）
npx @swiftlysingh/excalidraw-cli create diagram.dot -o output.excalidraw

# 内联 DOT
npx @swiftlysingh/excalidraw-cli create --format dot --inline "digraph { A -> B -> C }" -o output.excalidraw

图片与装饰（v1.1.0 新增）

图片节点

将图片作为流程元素包含：

(开始) -> ![logo.png](100x50) -> [处理] -> (结束)

定位图片

将图片放置在特定位置：

@image background.png at 0,0
@image logo.png near (开始) top-right

(开始) -> [处理] -> (结束)

节点装饰

为节点附加小图标/徽章：

[部署到生产环境]
@decorate checkmark.png top-right

[需要审核]
@decorate warning.png top-left

装饰锚点：top、bottom、left、right、top-left、top-right、bottom-left、bottom-right

贴纸库

使用可重复使用的贴纸库：

@library ./assets/stickers
@sticker success at 100,100
@sticker warning near (错误) top-right

散布图片

在画布上随机分布图片：

@scatter confetti.png count:10
@scatter star.png count:5 width:20 height:20

常用模式

API 请求流程

[客户端请求] -> [API 网关] -> {认证有效?}
{认证有效?} -> "是" -> [路由到服务] -> [[数据库]] -> [响应]
{认证有效?} -> "否" -> [401 未授权]

CI/CD 流水线

(推送) -> [构建] -> [测试] -> {测试通过?}
{测试通过?} -> "是" -> [部署到预发布] -> {手动批准?}
{手动批准?} -> "是" -> [部署到生产] -> (完成)
{手动批准?} -> "否" -> (已取消)
{测试通过?} -> "否" -> [通知团队] -> (失败)

用户注册

(开始) -> [输入详情] -> {邮箱有效?}
{邮箱有效?} -> "否" -> [显示错误] -> [输入详情]
{邮箱有效?} -> "是" -> {密码强度足够?}
{密码强度足够?} -> "否" -> [显示密码要求] -> [输入详情]
{密码强度足够?} -> "是" -> [[保存到数据库]] -> [发送验证邮件] -> (成功)

技巧

1. 保持标签简洁 - 使用简短、面向操作的文本
2. 决策以 ? 结尾 - 明确表示是条件判断
3. 使用一致的命名 - 有助于节点去重
4. 以 (开始) 开头 - 明确入口点
5. 测试复杂流程 - 如有需要，可拆分为更小的部分