从一行文字到标准流程图SiYuan 用 Mermaid 画图完整指南【免费下载链接】siyuanAn open-source, privacy-first, self-hosted knowledge workspace where humans and AI agents work together 开源、隐私优先、自托管的知识工作空间让人与智能体在此协作项目地址: https://gitcode.com/GitHub_Trending/si/siyuan写技术文档时你是否还在为一张流程图而纠结打开绘图工具排版半小时改一个字又要重画一遍。在 SiYuan 中你可以直接在文档里用 Mermaid 语法写出流程图、时序图等图表——输入文本图就出来了。本文带你走完从画出第一张图到处理复杂场景的完整路径包括三步快速建图、常用语法点和几个容易踩的坑。为什么用文字画图值得尝试传统流程图是一张图片无法修改、无法对比版本、缩放就模糊。Mermaid 的思路是把图变成代码用文本描述节点和连线渲染成矢量 SVG。你改动需求时只需改一行文字图立刻跟着变。SiYuan 把这个能力做成了内置功能编辑器识别到 mermaid 代码块后会自动加载渲染引擎核心逻辑在 app/src/protyle/render/mermaidRender.ts并且渲染出的图表会跟随明暗主题切换语法写错时错误信息直接显示在代码块下方不用猜除了 Mermaid 本体还额外注册了 zenuml 图表和 logos 图标包可用图标代替节点对习惯在笔记里沉淀文档的人来说图即文本意味着图表能像正文一样被搜索、版本化、协作。三步画出第一张图整个过程不到一分钟你只需要编辑器本身。在空白处输入/弹出命令菜单输入mermaid或直接点选 Mermaid 项SiYuan 会自动插入一个代码块在代码块里贴上语法光标移出后图表即刻渲染。斜杠菜单中各图表项Mermaid、ECharts、Graphviz 等的定义在 app/src/protyle/hint/extend.ts。下面是最小可运行示例贴进去就能看到效果graph LR表示从左到右布局方括号是普通节点花括号是判断节点箭头上可以用竖线加文字标注。保存文档后这张图就以 SVG 形式嵌在正文里随便放大都不会糊。按场景选语法一个点一节表达先后顺序graph 流程图上面例子只覆盖了最基础的连线。给节点指定不同形状能让图更专业圆角括号( )是圆角矩形 ]是旗形(( ))是圆形。配合subgraph可以给一组节点加框分组适合描述模块边界描述多角色交互sequenceDiagram 时序图接口联调、调用链说明这类谁先说话、谁后响应的场景用时序图最清楚。SiYuan 默认开启了序号显示源码中showSequenceNumbers: true每条消息自带编号讨论问题时可以直接引用第 3 步。实线箭头是同步调用虚线--是响应Note还能给某条消息加旁注。让图更整洁classDef 统一配色节点多了以后用classDef定义几套样式再批量套用比逐个节点写style省心改一处定义所有套用该类的节点同步更新。一个完整例子给功能写调用文档假设你要在文档里说明导出笔记的完整链路。先用 subgraph 划分界面、内核、文件系统三层再用时序图表现调用顺序这段内容和你平时的正文一样存放在工作区里后续需求变更时直接改文字即可不需要回到绘图工具重排。导出整篇文档为 HTML 时SiYuan 会在导出端重新渲染图表见 app/src/protyle/export/index.ts保证导出结果里图表同样完整。三个容易踩的坑语法报错看不懂位置渲染失败时错误信息会显示在代码块下方实现同样在 mermaidRender.ts 的 catch 分支照着提示修正即可常见原因是subgraph没有end闭合、participant 别名重复。折叠区里图表不显示折叠状态下代码块宽度为 0引擎会暂缓渲染展开后会自动补渲染属正常行为。想放大看细节渲染好的图表支持全屏查看点击后可缩放、平移、旋转见 app/src/protyle/preview/diagram.ts大图也不必担心看不清。写在最后当图变成文字它就获得了和笔记一样的生命可搜索、可版本化、可随手改。先在 SiYuan 里画一张简单的流程图试试手感你会发现画图这件事的门槛比想象中低得多。更多笔记格式细节可参考 docs/SY-FORMAT.zh-CN.md接口能力说明见 docs/API.zh-CN.md。【免费下载链接】siyuanAn open-source, privacy-first, self-hosted knowledge workspace where humans and AI agents work together 开源、隐私优先、自托管的知识工作空间让人与智能体在此协作项目地址: https://gitcode.com/GitHub_Trending/si/siyuan创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 从一行文字到标准流程图：SiYuan 用 Mermaid 画图完整指南
从一行文字到标准流程图SiYuan 用 Mermaid 画图完整指南【免费下载链接】siyuanAn open-source, privacy-first, self-hosted knowledge workspace where humans and AI agents work together 开源、隐私优先、自托管的知识工作空间让人与智能体在此协作项目地址: https://gitcode.com/GitHub_Trending/si/siyuan写技术文档时你是否还在为一张流程图而纠结打开绘图工具排版半小时改一个字又要重画一遍。在 SiYuan 中你可以直接在文档里用 Mermaid 语法写出流程图、时序图等图表——输入文本图就出来了。本文带你走完从画出第一张图到处理复杂场景的完整路径包括三步快速建图、常用语法点和几个容易踩的坑。为什么用文字画图值得尝试传统流程图是一张图片无法修改、无法对比版本、缩放就模糊。Mermaid 的思路是把图变成代码用文本描述节点和连线渲染成矢量 SVG。你改动需求时只需改一行文字图立刻跟着变。SiYuan 把这个能力做成了内置功能编辑器识别到 mermaid 代码块后会自动加载渲染引擎核心逻辑在 app/src/protyle/render/mermaidRender.ts并且渲染出的图表会跟随明暗主题切换语法写错时错误信息直接显示在代码块下方不用猜除了 Mermaid 本体还额外注册了 zenuml 图表和 logos 图标包可用图标代替节点对习惯在笔记里沉淀文档的人来说图即文本意味着图表能像正文一样被搜索、版本化、协作。三步画出第一张图整个过程不到一分钟你只需要编辑器本身。在空白处输入/弹出命令菜单输入mermaid或直接点选 Mermaid 项SiYuan 会自动插入一个代码块在代码块里贴上语法光标移出后图表即刻渲染。斜杠菜单中各图表项Mermaid、ECharts、Graphviz 等的定义在 app/src/protyle/hint/extend.ts。下面是最小可运行示例贴进去就能看到效果graph LR表示从左到右布局方括号是普通节点花括号是判断节点箭头上可以用竖线加文字标注。保存文档后这张图就以 SVG 形式嵌在正文里随便放大都不会糊。按场景选语法一个点一节表达先后顺序graph 流程图上面例子只覆盖了最基础的连线。给节点指定不同形状能让图更专业圆角括号( )是圆角矩形 ]是旗形(( ))是圆形。配合subgraph可以给一组节点加框分组适合描述模块边界描述多角色交互sequenceDiagram 时序图接口联调、调用链说明这类谁先说话、谁后响应的场景用时序图最清楚。SiYuan 默认开启了序号显示源码中showSequenceNumbers: true每条消息自带编号讨论问题时可以直接引用第 3 步。实线箭头是同步调用虚线--是响应Note还能给某条消息加旁注。让图更整洁classDef 统一配色节点多了以后用classDef定义几套样式再批量套用比逐个节点写style省心改一处定义所有套用该类的节点同步更新。一个完整例子给功能写调用文档假设你要在文档里说明导出笔记的完整链路。先用 subgraph 划分界面、内核、文件系统三层再用时序图表现调用顺序这段内容和你平时的正文一样存放在工作区里后续需求变更时直接改文字即可不需要回到绘图工具重排。导出整篇文档为 HTML 时SiYuan 会在导出端重新渲染图表见 app/src/protyle/export/index.ts保证导出结果里图表同样完整。三个容易踩的坑语法报错看不懂位置渲染失败时错误信息会显示在代码块下方实现同样在 mermaidRender.ts 的 catch 分支照着提示修正即可常见原因是subgraph没有end闭合、participant 别名重复。折叠区里图表不显示折叠状态下代码块宽度为 0引擎会暂缓渲染展开后会自动补渲染属正常行为。想放大看细节渲染好的图表支持全屏查看点击后可缩放、平移、旋转见 app/src/protyle/preview/diagram.ts大图也不必担心看不清。写在最后当图变成文字它就获得了和笔记一样的生命可搜索、可版本化、可随手改。先在 SiYuan 里画一张简单的流程图试试手感你会发现画图这件事的门槛比想象中低得多。更多笔记格式细节可参考 docs/SY-FORMAT.zh-CN.md接口能力说明见 docs/API.zh-CN.md。【免费下载链接】siyuanAn open-source, privacy-first, self-hosted knowledge workspace where humans and AI agents work together 开源、隐私优先、自托管的知识工作空间让人与智能体在此协作项目地址: https://gitcode.com/GitHub_Trending/si/siyuan创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考