3分钟上手 SiYuan Mermaid非专业用户也能画出标准电路图【免费下载链接】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 是一套图表语法规则你用方括号声明节点对应元件或模块用箭头声明连线对应导线路径SiYuan 编辑器解析这些文本后生成 SVG 矢量图。图不是截图放大不糊配色还会自动跟随明暗主题。SiYuan 画电路图的适用场景与边界✅ 适合串联/并联的电路走向示意图、设备内部模块框图硬件说明文档中的系统架构示意电源模块、控制模块、检测模块如何连接实验报告里电路结构讲解部分的配图⚠️ 不适合需要精确电气符号标准 IEC 元件符号、引脚级连线的原理图涉及坐标、走线长度的 PCB 布局图Mermaid 是结构示意工具不是 EDA 工具。判断标准很简单如果图的目标是让读者看懂信号从哪走到哪用它如果目标是要拿去生产或考试评审请选专业电路图软件。SiYuan Mermaid 电路图 3 分钟上手只需三步插入 Mermaid 代码块在编辑器中按/调出命令菜单输入关键词mermaid选中即可也可以在代码块首行手动写 graph LR P[电源 5V] -- L[负载] L -- P第一行 graph LR 声明这是一张流程图、方向从左到右第二、三行把电源和负载两个节点连成回路。保存后编辑器会立即渲染出图改一个标签文字图马上跟着变——这就是文本画图的实时预览体验。 3. **验证渲染**图没出来时先看常见问题一节多数情况是代码块语言标识没写对。 渲染逻辑集中在源码 [app/src/protyle/render/mermaidRender.ts](https://link.gitcode.com/i/24ad425f1ecdc94caf5b695e85a648e6)当前加载 Mermaid v11.13.0并额外注册了外部图表扩展与图标包还支持深色主题自动切换。 ## Mermaid 电路图语法速查表 | 想表达的内容 | 语法写法 | 在电路语境中的含义 | | --- | --- | --- | | 节点方框 | A[标签] | 一个元件或模块如 R1[电阻 R1] | | 连线带方向 | A -- B | 电流/信号从 A 流向 B | | 连线加标注 | A --\|220V\| B | 线上标注电压、线号等参数 | | 换方向 | graph TD上下、graph LR左右、graph TB上到下 | 控制整张图的主轴走向 | | 分组 | subgraph 组名 ... end | 把元件圈成一个模块电源部分、控制部分 | | 统一配色 | classDef 类名 fill:#f9f,stroke:#333 class A,B 类名 | 给多个元件套同一套颜色形成元件库效果 | | 单点配色 | style A fill:#ff9900,stroke:#333 | 只改某个节点的颜色 | 看懂这张表后面所有示例都不需要再查文档。 ## 从串联电路到多模块框图一步步画复杂 **第一步串联电路**。把元件排成一列依次连接就是最常见的串联示意。示例A[电源 ] -- B[电阻 R1] -- C[灯泡 L1] -- D[电源 -]。如果想让四个元件统一用粉紫色填充追加一行 classDef circuit fill:#f9f,stroke:#333,stroke-width:2px再写 class A,B,C,D circuit 应用即可——classDef 相当于定义了一个元件样式class 负责把它套到指定节点上。 **第二步多模块电路**。当电路超过三五个元件逐个画线会乱。此时用 subgraph 把元件按功能分组电源模块整流、滤波、稳压一组控制模块MCU、继电器、负载一组检测模块传感器、放大器一组组与组之间再用一条跨组连线说明供电信号。这样画出来的就是硬件文档里标准的设备框图形态模块内细节可折叠式阅读模块间关系一目了然。 **第三步文档化**。把框图嵌进一篇结构完整的笔记配上文字说明各模块职责团队或未来的自己再看时图和说明在同一篇文档里改图只需改文本。SiYuan 的每个 Mermaid 图都是一个内容块可以被引用、被检索这也为下一节的沉淀与分享打基础。 ## 常见问题与排错 | 现象 | 原因与处理 | | --- | --- | | 代码块没有渲染成图 | 检查首行语言标识是否为 mermaid命令菜单插入的块一般不会出错手动写的容易漏写 | | 图区域显示错误提示 | Mermaid 会在渲染区直接提示语法错误位置从该行开始逐行检查括号、箭头是否写全 | | 深色主题下图发灰刺眼 | 无需处理——SiYuan 检测到深色外观后会自动将 Mermaid 主题切为 dark这是源码中内置的行为 | | 中文标签显示异常 | 个别环境字体回退异常时可先改用英文标签验证再调回中文 | | 折叠块里的图不渲染 | 折叠状态下编辑器会延迟渲染该块展开折叠后图会自动出现属正常机制 | ## 如何导出 SiYuan 电路笔记并沉淀知识 - **导出成文档**通过笔记的导出功能输出 Markdown 或 PDFMermaid 代码块会原样保留接收方用任意 Mermaid 环境打开都能重新渲染。导出流程实现见 [app/src/protyle/export/index.ts](https://link.gitcode.com/i/ad701677c8d066c7c0c431c6fa050a72)。 - **直接复用代码**图本身是文本选中代码块复制即可粘贴到支持 Mermaid 的其他工具里不存在格式锁定。 - **随知识库管理**在 SiYuan 内这张图和普通文字一样参与块引用、历史版本与全文检索。下面是 SiYuan 编辑器的知识工作界面电路笔记就维护在这样的文档空间里 [](https://link.gitcode.com/i/701b759129ed4625125dc50b35e58ac1) - **团队统一风格**把常用的 classDef 配色方案整理成一段固定文本相当于自己的元件样式模板新图直接粘贴引用全团队电路图风格一致。 ## 参考链接与源码位置 - Mermaid 渲染实现[app/src/protyle/render/mermaidRender.ts](https://link.gitcode.com/i/24ad425f1ecdc94caf5b695e85a648e6) - 斜杠命令菜单/mermaid 入口[app/src/protyle/hint/extend.ts](https://link.gitcode.com/i/6cf474d3ee175a6089621bac3ade81d8) - 导出功能[app/src/protyle/export/index.ts](https://link.gitcode.com/i/ad701677c8d066c7c0c431c6fa050a72) - 官方中文文档README_zh_CN.md - Mermaid 官方语法参考外部[mermaid.js.org](https://mermaid.js.org/)【免费下载链接】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），仅供参考
