思源笔记 Mermaid 画电路图：新手 10 分钟画出第一张能用的图

思源笔记 Mermaid 画电路图新手 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 渲染用几行文字就能画出能改、能缩放、跟着笔记走的电路结构图。用「思源笔记 Mermaid 画电路图」这条路图不再是死截图而是能编辑的文本。成品长什么样先看这张串联回路先给你看目标效果——一个「开关 → 保险丝 → 主控 → 蜂鸣器」的串联回路从左到右排开保存后编辑器立刻把它渲染成一张矢量图graph LR SW[开关 SW1] -- FUSE[保险丝 1A] FUSE -- MCU[主控 MCU] MCU -- BZ[蜂鸣器 B1]看懂这张图就记住三件事一个元件就是一个节点一根导线就是一条箭头排布方向写在graph那一行。后面全是在这个骨架上填空。最快出图一条 / 命令 几行文字在空白行敲/就能唤出命令菜单。菜单里有 Mermaid 一项输入 mermaid 或「图表」都能定位到回车就插入了一个空的 mermaid 代码块。这个菜单项由 extend.ts 定义所以在中英文环境下都能搜到。手敲三个反引号加 mermaid 也一样。习惯键盘的话直接敲三个反引号换行再写 mermaid效果和菜单一样不用去翻菜单。边写边预览所见即所得。渲染由内置 Mermaid 11.x当前 11.13.0引擎负责mermaidRender.ts 里能看到它默认打开流程图自适应宽度、时序图序号并在深色模式下自动切换图表配色。你只管打字改完即刷新。三招让图更专业标注、上色、分子图会画最小图之后差的只是「像专业图纸」那一步。三个写法按顺序用图的信息量和可读性都会上一个台阶。给连线加标注。在箭头上用竖线写文字比如SW --|220V| FUSE把电压、电流方向、线号标在导线上这是电路图里信息量最集中的一行。给元件上色区分角色。用classDef定义一个样式类再在节点上用:::类名套用。给电源一个色、给检测元件另一个色一眼分清模块更接近看图纸的习惯。用subgraph给模块画框。复杂电路通常由电源、控制、检测几个模块组成每个subgraph就是一块「边框」先连模块内部最后再跨模块拉线——graph TB subgraph 电源 P[整流桥] -- V[5V 输出] end subgraph 控制 C[MCU] -- R[继电器] end V -- C先分块、再连线是万能套路先想清楚有几个功能模块再数模块之间有几根线图自然就分好了。图不渲染或挤成一团先查这两点整块不渲染先看红色报错。Mermaid 对语法错误很直接——一出错就停掉整块只显示报错不显示图。最常见的三个坑缩进里混进全角空格、节点 id 用了特殊字符、漏了方括号。按报错定位到那一行修别盲目删改。节点太多挤成一团先换布局。把graph LR左右排和graph TB上下排互换效果差别很大还不行就拆成多张子图再用内容块引用把几张图串在一篇笔记里比一张巨型全图好读得多。交付复制图像、导出、直接搬源码右键 → Export 导出整篇。笔记连同图表可导出为 HTML / PDF矢量图在导出后依然清晰导出逻辑在 export/index.ts。选中渲染结果复制图像也能直接粘进聊天或文档。复制 mermaid 文本即可复用。源码是纯文本拷给同事或贴进任何支持 Mermaid 的工具都能直接渲染不存在锁定也不需要「图跟笔记走」的额外步骤——它本来就在笔记里。说句实话它画的是逻辑结构图。模块框图、信号流向、连接关系非常清楚适合方案记录、故障分析和教学但精确的工程原理图电阻符号、引脚标注、网表仍需专业 EDA 工具。两者定位不同不冲突按需各取所需。参考资料README.zh-CN.mdrender/mermaidRender.tshint/extend.tsexport/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），仅供参考