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 TBTop 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 行文字画出你的第一张电路图——从「电源 → 电阻 → 负载」开始十分钟就能体会到文字即图纸的便利。参考资料官方使用文档README.zh-CN.mdMermaid 渲染实现源码app/src/protyle/render/mermaidRender.tsMermaid 官方语法参考官方网站 flowchart流程图章节【免费下载链接】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），仅供参考