SiYuan Mermaid 图表实战5 行文本画流程图子图与时序图一次掌握【免费下载链接】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 11.x 渲染引擎在正文里敲几行文本就能出可缩放、可导出的矢量图。图稿从此是纯文本能版本化、能搜索、能反向链接改文字比改图快得多。从 / 命令到第一张 Mermaid 流程图打开任意笔记在空行输入/弹出命令菜单。直接键入mermaid过滤回车代码块就绪。菜单项的注册逻辑在 extend.ts。替换成下面 5 行离开光标即渲染graph LR声明布局方向左到右。A[浏览器请求]方括号里写元件名它就是图上的一个节点。--一条箭头就是一次调用或连接。D --|查询结果| B箭头上的竖线加文字给这条边标注含义。改一个节点名、加一根箭头保存后图形立即更新。想确认渲染参数可以翻 mermaidRender.ts深色模式下主题自动切换时序图默认带序号。它擅长什么不擅长什么Mermaid 画的是逻辑结构图模块框图、信号流向、调用关系一目了然适合方案记录、故障复盘和教学。它不出精确的工程图——标准电阻符号、引脚标注、网表这些要交给专业 EDA 工具。两者定位不同不冲突。源码是纯文本拷到任何支持 Mermaid 的工具都能直接渲染不存在锁定。三行升级给节点上色、拆子图、画时序图前 5 行解决了「有图」下面三种写法解决「图更好读」。每种给一个最小示例。连线标注与节点配色给关键箭头加文字标注--|200|用classDef定义样式、:::套用让不同类型的节点一眼区分最后一行定义 core 类的填充色与边框色第三行让「服务A」节点直接套上这个样式。节点超 8 个就考虑拆子图用subgraph给每个功能模块画框模块内部先连完跨模块的线放最后阅读顺序自然变成「先看模块内部再看模块之间」。[(...)]是圆柱形节点习惯上拿它表示存储。时序图谁在什么时刻调用谁调用顺序比拓扑结构重要的场景换sequenceDiagram。SiYuan 给时序图默认打开了序号显示步骤多了也不乱participant声明参与方-是实线请求--是虚线返回。常见问题速查图不渲染怎么办语法错整块就不出图但错误提示会定位到具体行。高发原因缩进里混了全角空格、节点 id 用了中文、方括号不配对。按提示改别盲目删。节点太多挤成一团graph LR换graph TB试试布局差异明显再不行就按上一节拆子图。一张图讲清一个主题节点建议 15 个以内。导出会不会糊SVG 是矢量的放大不糊。右键笔记或顶部菜单选 Export整篇笔记连同图表导出 HTML / PDF实现见 export 模块。只有 Mermaid 这一种图吗不是。同一个/菜单里还有 ECharts 图表、Graphviz、PlantUML、脑图等各取所需。参考资料现在打开 SiYuan敲/用 5 行代码画出今天的第一张流程图——从「请求 → 网关 → 服务 → 返回」开始。官方使用文档app/guide/渲染实现app/src/protyle/render/mermaidRender.ts菜单注册app/src/protyle/hint/extend.ts【免费下载链接】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），仅供参考