| Excalidraw | .excalidraw.md (Obsidian) / .excalidraw (excalidraw.com) | Standalone visual deliverable — 架构图, OKR 树, 培训页, 汇报配图. Precise coordinates, hand-drawn style, exportable to SVG/PNG, animatable. |
| Canvas | .canvas (JSON Canvas) | An interactive workspace in Obsidian: nodes the user drags around, nodes that embed real vault notes (file nodes), 无限画布 brainstorming. |
Routing rules, in order:
Then read exactly one reference:
Applies to every backend. Match content structure, don't default to "flowchart" reflexively.
| 类型 | English | 使用场景 | 做法 |
|---|---|---|---|
| 流程图 | Flowchart | 步骤说明、工作流程、任务执行顺序 | 箭头连接各步骤,清晰表达流程走向 |
| 思维导图 | Mind Map | 概念发散、主题分类、灵感捕捉 | 中心向外发散,放射状结构 |
| 层级图 | Hierarchy | 组织结构、内容分级、系统拆解、OKR 树 | 自上而下或自左至右构建层级节点 |
| 关系图 | Relationship | 要素之间的影响、依赖、互动 | 图形间连线表示关联,箭头 + 说明 |
| 对比图 | Comparison | 两种以上方案或观点的对照分析 | 左右两栏或表格形式,标明比较维度 |
| 时间线图 | Timeline | 事件发展、项目进度、模型演化 | 以时间为轴,标出关键时间点与事件 |
| 矩阵图 | Matrix | 双维度分类、任务优先级、定位 | 建立 X / Y 两个维度,坐标平面安置 |
| 序列图 | Sequence | 组件间交互、API 调用、消息流 | 时间轴布局,actor 分列,激活框 |
| 状态图 | State | 系统状态、状态流转、生命周期 | 状态节点 + 带标签的转移边 |
| 自由布局 | Freeform | 内容零散、灵感记录、初步信息收集 | 无结构限制,自由放置图块与箭头 |
Backend coverage: Mermaid does 流程图/思维导图/层级图/关系图/对比图/序列图/状态图 natively; 时间线/矩阵/自由布局 are better in Excalidraw or Canvas.
These hold for all three backends. Backend-specific mechanics are in the references.
统一语义色板(Open Color 体系),三种 backend 共用同一套语义,只是写法不同:
| 语义 | 浅填充 | 深描边/文字 |
|---|---|---|
| 输入 / 数据源 / 前端 / 用户侧 | #a5d8ff | #1971c2 |
| 成功 / 输出 / 已完成 / 后端基础设施 | #b2f2bb | #2f9e44 |
| 警告 / 待处理 / 外部依赖 / AI 工具 | #ffd8a8 | #e8590c |
| 处理中 / 中间件 / 服务集成 | #d0bfff | #7048e8 |
| 错误 / 关键 / 告警 / 执行器 | #ffc9c9 | #c92a2a |
| 备注 / 决策 / 规划 | #fff3bf | #e67700 |
| 存储 / 数据 / 缓存 / 知识库 | #c3fae8 | #0ca678 |
| 分析 / 指标 / 统计 | #eebefa | #862e9c |
| 中性 / 传统系统 / 工具 | #e9ecef | #495057 |
分层区域背景(大矩形,opacity 30):#dbe4ff 前端/UI 层 · #e5dbff 逻辑/处理层 · #d3f9d8 数据/工具层。
对比度硬规则: 白底文字不浅于 #757575;浅色填充上用同色系深色变体(浅绿底配 #2f9e44,不配 #69db7c);深色填充上用白字。
| Backend | 保存位置 |
|---|---|
| Mermaid | 直接写进目标文档;独立留存时放 ai-output/temporary/drafts/ |
| Excalidraw | Excalidraw/<主题>/<名称>.excalidraw.md — 禁止平铺到 Excalidraw/ 根目录,按业务主题建子目录(Excalidraw/公布运价/、Excalidraw/周报/、Excalidraw/支付/),不存在则先建 |
| Canvas | canvas/<名称>.canvas |
| 生成脚本(Excalidraw 复杂图) | ai-output/temporary/scripts/ |
文件名优先中文,便于检索。
生成后告诉用户:
上游来源:Mermaid / Excalidraw / Canvas 三套规则原属 axtonliu/axton-obsidian-visual-skills,Python builder 为本仓库自建。