# Sketch Flow

> 使用 Mermaid handDrawn 创建可编辑的 Excalidraw 风格 SVG 图。

- Skill: `subsequence-cpu/sketch-flow` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add subsequence-cpu/sketch-flow`
- Raw SKILL.md: https://api.skillmd.com/api/skills/subsequence-cpu/sketch-flow/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: subsequence-cpu (https://skillmd.com/u/subsequence-cpu)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/subsequence-cpu/sketch-flow

---


# 手绘流程图

生成具有手绘视觉特征、语义准确且可通过 Mermaid 源码维护的 SVG 图。

## 工作流程

1. 检查原始材料、现有图形及其引用位置。保留流程、分支、并发关系、状态转换、方向和业务术语，不得依据布局需要增删业务步骤。
2. 根据主要关系选择图形类型：处理路径使用流程图，交互顺序使用时序图，合法状态转换使用状态图。仅在原始材料包含相应语义时使用架构或算法表达。
3. 保持与文档层级一致的抽象程度。用户未要求实现细节时，不增加接口、代码、测试、实现映射或变更记录。
4. 仅在原始材料明确表示扇出、扇入或并行关系时采用横向并行布局。视觉分组不得被表达为新的业务节点。
5. 创建、重构或重新渲染图形时，读取[样式规范](references/style-spec.md)，并按照其中的渲染配置、颜色规则、布局约束和校验要求执行。
6. 使用 Mermaid 原生 `look: handDrawn` 和固定 `handDrawnSeed` 生成 SVG。不得使用常规渲染器模拟手绘效果，也不得以浏览器截图替代 SVG。
7. 使用 `Excalifont, Xiaolai, cursive` 字体栈。需要在 Obsidian 中稳定显示或独立分发时，将所需 WOFF2 字体嵌入 SVG，避免依赖外部网络资源。
8. 保留 Mermaid 源码，并在 SVG 通过语义、布局、字体和引用校验后替换旧图。

## 输出要求

- 默认交付 SVG，并保留对应的 Mermaid 源码。
- 仅在用户明确要求时额外交付 PNG；PNG 不得替代 SVG。