SiYuan Mermaid 电路图：3 个技巧，10 分钟从零画出完整电路图-育师

SiYuan Mermaid 电路图：3 个技巧，10 分钟从零画出完整电路图

【免费下载链接】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 渲染，画电路图有另一条路：把图纸写成文字，图跟着文字一起变。

为什么「不画、改写」：SiYuan Mermaid 文字即图纸的思路

图片式的图纸，画完就「死」了：放大看不清，改动要重做，换台设备同步过去只是一堆字节。Mermaid 电路图反过来了——每个元件是一行文字，每根导线是一个箭头，改一个字符，图立刻跟着变。

这带来一个很实际的好处：图纸不再是一次性的图片，而是笔记内容本身。它可以被版本化、被引用、被搜索；万一误删了一行，SiYuan 的数据历史里留着上一版，随时能找回。

而且你什么都不用装。SiYuan 编辑器内置了 Mermaid 渲染引擎，画完直接出 SVG 矢量图，放大到 200% 也不糊，直接贴进文档和演示稿都没问题。配色还会跟随主题——深色模式下图表自动切换暗色配色，相关逻辑见 mermaidRender.ts。

如何触发 SiYuan 的 Mermaid 代码块：两条路画出第一张串联电路

在空白行输入/，命令菜单会弹出来，里面就有 Mermaid 一项（菜单项的加载逻辑在 extend.ts），选中即进入代码块。更直接的方式：直接敲```加mermaid再回车，效果一样。

进了代码块，写一个最小的串联电路，5 行就够：

graph LR P1[电源 +] --> R1[电阻 R1] R1 --> L1[灯泡 L1] L1 --> P2[电源 -]

逐行读一遍就全懂了：graph LR声明布局方向，Left to Right，从左往右摆；方括号里的文字是节点上显示的元件名；-->箭头就是导线，指向即信号走向。写到这里页面已经在实时渲染了，不需要点任何预览按钮——边写边出图，这就是文字图纸的体感。切到阅读模式，看到的是一张干净的矢量图。

不喜欢横向排列？把第一行改成graph TB（Top to Bottom），同一张电路就变纵排。两种布局只是两个词的差别，这是画板工具给不了你的灵活。

电路图上加电压标注的写法：标注、上色、布局三个进阶技巧

图能画出来了，下一步是画得「专业」，三个技巧都是小语法。

第一，给导线写信息。箭头上用竖线包一段文字，比如A -->|220V AC| B，电压、电流方向、线号都能标上去，这是电路图里信息量最值钱的一个语法。

第二，给元件上色。用classDef定义一个样式类，节点后跟:::套用，电源、电阻、检测元件一眼可辨，更接近专业图纸的阅读习惯：

graph LR A[电源 +] -->|220V AC| B[电阻 R1] B --> C[负载 L1] classDef power fill:#f97316,stroke:#7c2d12,color:#fff A:::power

第三，布局方向随便切。graph LR横排、graph TB竖排，图挤了就先换一种试试，差异往往比想象中大。

一个小建议：一张图讲清一个主题就好。节点一旦超过 15 个，图就开始变挤，这时不妨拆成几张子图，再用 SiYuan 的内容块引用串在同一篇笔记里。

subgraph 分区步骤：先分区后连线，理清复杂电路

真实电路通常由几个功能模块拼成，这时用subgraph给每个模块画一个「边框」。思路就一句话：先想清楚有哪几个功能模块，再想模块之间有几根线——模块内部先连好，跨模块的线最后统一画。以「整流稳压电源 + MCU 控制 + 传感检测」为例：

graph TB subgraph 电源模块 A[交流 220V] --> B[整流桥] --> C[滤波电容] --> D[稳压器] D --> E[+5V 输出] end subgraph 控制模块 F[MCU] --> G[继电器] --> H[负载] end subgraph 检测模块 I[传感器] --> J[信号放大] --> F end E --> F E --> I

三个subgraph把图切成电源、控制、检测三块，E --> F和E --> I这两根供电线放在最后画，读图顺序自然就是「先模块内、后模块间」，和电路本身的能量流向一致。

Mermaid 电路图画得了什么、画不了什么

说句实话：Mermaid 画的是电路的逻辑结构图——模块框、信号流向、连接关系一目了然，适合方案记录、故障分析和教学。要精确的工程原理图——元件符号、引脚标注、网表——还是交给专业 EDA 工具，定位不同，并不冲突。

还有一点让人安心：源码是纯文本，这张图拷到任何支持 Mermaid 的工具里都能原样渲染，不存在锁定。

如果图突然不渲染了，别慌着删行。语法出错时整图不画，而是显示红色错误信息——先看报错定位到具体行再改。最常见的三个元凶：缩进里混进全角空格、节点 id 用了中文或特殊字符、漏写方括号。

画好的电路图三条出路：粘贴、导出、交给队友

图完成后，出路有三条：① 选中渲染结果复制图像，直接粘进即时消息或文档；② 用 SiYuan 的导出功能（右键笔记 → Export）把整篇笔记连同图表导出为 HTML / PDF，图表以矢量形式保留，实现见 export/index.ts；③ 把 Mermaid 文本原样发给队友，他们用任何 Mermaid 工具都能接着改。

现在就打开 SiYuan，在任意笔记里敲下/，用 5 行文字画出你的第一张电路图——从「电源 → 电阻 → 负载」开始，十分钟就能体会到文字即图纸的便利。