Mermaid是VSCode中最稳定的Markdown流程图方案，官方推荐、GitHub原生支持，需安装Mermaid Preview插件，用`mermaid语法实时预览；PlantUML适合专业UML图但依赖Java；Draw.io适合拖拽绘图但脱离Markdown文本流。

VSCode 本身不内置流程图渲染能力，但通过插件 + Markdown 扩展语法可以实现「写代码式绘图」——关键不是选哪个工具最炫，而是看它是否真正支持实时预览、导出可靠、且不破坏你已有的写作流。

Mermaid 是当前 VSCode 中最稳的 Markdown 流程图方案

VSCode 官方推荐、GitHub 原生支持、主流博客平台（如 Hexo、VuePress）也默认兼容 mermaid。它用纯文本描述图表，配合插件就能在编辑器里边写边看。

• 必须安装插件：Mermaid Preview（by bierner）或 Markdown Preview Mermaid Support（官方推荐轻量版）
• 在 Markdown 文件中用 ```mermaid 包裹代码块，例如：

  ```mermaid
  graph TD
    A[开始] --> B{判断}
    B -->|是| C[执行]
    B -->|否| D[结束]
  ```

• 右键选择「Open Preview to the Side」即可实时渲染，无需刷新页面
• 注意：部分旧版插件不支持 %%{init: {...}}%% 初始化配置，如需主题/字体调整，优先选 Mermaid Preview

PlantUML 能画更专业的 UML 图，但本地运行门槛略高

如果你需要时序图、类图、状态机等标准 UML，PlantUML 比 mermaid 表达力更强，但它依赖 Java 环境或远程服务，容易卡在「为什么预览没反应」上。

openclaw-github-config-impact

OpenClaw 技能 — 给定一个 GitHub 仓库 URL，自动解析出 owner/repo 名称，发现其中的 YAML/properties 配置文件及其配对的中文字段说明；在 `workspace/{repo}/` 目录下按同步日期（格式为 `YYYY-MM-DD`）创建时间戳子目录；写入 `.openclaw-config-state.json` 状态文件。每次用户提问前，先比对远程仓库当前 ref（如 `main` 或 `master`）的最新提交 SHA 与本地状态文件中记录的 SHA：

下载

• 必须先装 Java（JRE 11+），再安装插件：PlantUML（by jebbs）
• 插件默认调用本地 plantuml.jar，路径需手动配进 VSCode 设置：plantuml.jar 的绝对路径填入 plantuml.jar 配置项
• 远程渲染虽免配置，但涉及隐私数据上传，不建议在含敏感逻辑的流程图中启用
• 语法示例（时序图）：

  @startuml
  Alice -> Bob: Authentication Request
  Bob --> Alice: Authentication Response
  @enduml

Draw.io（diagrams.net）适合拖拽+代码混合场景，但不是纯 Markdown

它不走 Markdown 语法，而是把图表保存为 XML（.drawio 文件），再通过插件嵌入 Markdown 预览——适合「已有手绘草图要转数字版」或「多人协作需图形微调」的情况。

• 安装插件：Draw.io Integration（by Hediet）
• 新建文件时选 .drawio 后缀，画完可导出为 PNG/SVG，并自动生成 Markdown 图片引用：![alt](./xxx.png)
• 不能像 mermaid 那样直接在段落中内联写图，每次改图都要切窗口、保存、再刷新预览
• 优点是支持图标库、对齐吸附、多页文档，适合画架构图或部署拓扑

真正难的不是画出来，而是确保别人用同一套环境打开时不丢样式、不报错、不缺字体。mermaid 最接近「开箱即用」，PlantUML 功能强但得调通环境，draw.io 灵活却脱离 Markdown 文本流——选哪个，取决于你下一张图要解决什么问题，而不是它能画多漂亮。