SiYuan Mermaid 电路图7 行文字画出能实时渲染的串联电路【免费下载链接】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 电路图功能在正文里敲几行文本编辑器就会实时画出结构图——不用装插件也不用打开画图软件。它适合做方案记录、故障分析、教学配图最短上手路径是 4 步一个最简单的串联电路只需要 7 行文字几分钟就能画完第一张。先看效果7 行文字长出的串联电路这是最终效果的全部代码——存下之后代码块下方立刻渲染出一张可缩放的矢量图graph LR A[电源 ] -- B[电阻 R1] B -- C[灯泡 L1] C -- D[电源 -]图不再是截图而是笔记内容本身。改一个元件标号、换一条连线图马上跟着变万一误删了还能从 SiYuan 的数据历史里找回。这是它和「画完就变成一张图」的工具最大的区别。最短上手路径4 步触发 Mermaid 块并看到图第 1 步在空白行敲/弹出命令菜单输入mermaid输diagram也能过滤到回车。一个空代码块就插进笔记了。第 2 步在块里第一行输入graph LR声明「从左到右」的布局方向。第 3 步往下每行写「元件 箭头」方括号里是元件名--是一根导线。4 个节点就是一张完整串联图。第 4 步停手两秒图渲染在代码块正下方。SiYuan 内置的 Mermaid 11.x 引擎会自动跟随暗色主题切换配色、自适应窗口宽度渲染逻辑写在 app/src/protyle/render/mermaidRender.ts切到阅读模式看到的就是纯矢量结果。写法拆解3 个可以即学即用的小语法节点即元件箭头即导线。A[电阻 R1] -- B[灯泡 L1]就是一根连线graph LR是左右排布graph TB换成上下排布同一组代码两种走向。连线标注是电路图的信息核心。在箭头中间用竖线夹住文字A --|220V AC| B电压、电流方向、线号都能标在导线上改一行文字标注就更新了。用 classDef 给元件分组上色。先定义一个颜色类再在节点后用:::套用电源、负载、检测元件就能一眼区分classDef power fill:#f9a825,stroke:#e65100 A[电源 ]:::power -- B[电阻 R1] B -- C[灯泡 L1]节点多的时候每个节点单独一行、箭头逐条列出即可。一张图建议控制在 15 个节点以内讲清一个主题比塞满一张大图更好读。真实场景组合用 subgraph 拆出充电管理电路 ⚡真实电路很少是一条直线多半是「电源 负载 检测」几个模块。组合思路就两步先圈定功能模块再补模块间的线。每块模块用subgraph画个「边框」模块内部先连完最后几行统一画跨模块的供电线阅读顺序自然就是「先模块内、后模块间」。以「AC 转直流 电池充电 温度检测」为例graph TB subgraph 电源部分 A[交流输入] -- B[整流桥] B -- C[滤波电容] C -- D[直流稳压] end subgraph 充电部分 E[充电管理 IC] -- F[保护板] F -- G[电池组] end subgraph 检测部分 H[温度传感器] -- I[MCU] end D -- E D -- I I -- F16 行画完三个模块和 3 根跨模块线。之后要加「过压切断」之类的新分支只需在对应subgraph里加一个节点、补一条箭头其余部分不动。卡点直答渲染 Mermaid 电路图的 3 个高频问题为什么代码块不渲染只出一行红字Mermaid 对语法错误很直接一处错整块不渲染只显示错误信息。好消息是错误信息里带行号照着行号定位就行。最常見的三个原因缩进里混进了全角空格箭头或方括号打成了全角字符节点 id 里带空格或特殊符号。先按行号修别整块删了重写。节点一多就挤成一团怎么办两个办法把graph LR和graph TB换个方向试试布局差异比想象中大或者按上一节的思路拆成多个subgraph甚至拆成两张图再用内容块引用把几张图放进同一篇笔记。它画的算「真」电路图吗算逻辑结构图不算工程原理图。模块框、信号流向、连接关系很清楚适合方案记录、故障分析和教学但电阻符号、引脚标注、网表这类东西它不管那仍要交给专业 EDA 工具。定位不同并不冲突。另外源码是纯文本拷到任何支持 Mermaid 的工具里都能渲染不存在锁定。出图之后复制、导出、多端同步 图有三种出路选中渲染结果复制图像直接贴进聊天窗口或文档右键笔记选「导出」把整篇笔记连同图表导出为 HTML / PDF图表保持矢量不糊导出实现见 app/src/protyle/export/index.ts或者直接把 Mermaid 文本发给同事复用。因为图长在笔记里桌面端和手机端同步的是同一份内容你在电脑上改的电路手机上打开就是新的现在打开 SiYuan在任意笔记的空白行敲下/用 7 行文字画出你的第一张 SiYuan Mermaid 电路图。参考资料官方中文文档 README.zh-CN.mdMermaid 渲染实现 app/src/protyle/render/mermaidRender.ts笔记导出实现 app/src/protyle/export/index.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），仅供参考
