企业官网建设流程全解析

7 行文字画出一张电路图：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

文档里写「交流电经过整流桥，再由稳压器输出 5V」，读者未必能在脑里拼出电路的样子；用画板画好截图贴进来，改一个标号就得重新截一次，图越截越糊。SiYuan 是一个开源、隐私优先、自托管的知识工作空间，它的内置 Mermaid 能力用 7 行文字就能画出电路图：不装插件、不懂编程，图就在笔记里实时渲染出来，改字即改图。

先看到成品：7 行 Mermaid 画出一条串联回路

在空白行敲下「/」，命令菜单弹出，选「Mermaid」回车即可（菜单选项的加载逻辑见 extend.ts，Mermaid 是其中一项）。然后输入这一段：

整段不到 7 行，渲染出来就是「电源 → 电阻 → 灯泡 → 负载 → 电源」的一条串联回路。核心要素只有一句话：元件是括号里的节点，导线是-->箭头，整张图的走向由第一行graph LR（左右排布）决定，换成graph TB就是上下排布。

保存后（甚至只是停手一拍）图块立即渲染成 SVG 矢量图，放大不糊。渲染由 SiYuan 内置的 Mermaid 11 引擎完成，图会自适应宽度、暗色模式下自动切换配色，这些配置都写在 mermaidRender.ts 里。编辑态是文字与图形双视图，随时能回溯修改；切到预览模式则只剩干净的矢量图。不装插件画电路图的完整流程，就是「敲字、停手、看图」这三件事。

三条值得记住的语法

画通第一张图之后，把这三条语法记下来，之后 Mermaid 电路图的绝大多数需求都能覆盖 🎯

• 连线加标注：箭头两侧的竖线里写文字，电压、电流方向、线号都标在这里，这是电路图信息量最大的一个语法。

  A -->|220V AC| B

• 元件上色：用classDef定义一套颜色，节点名后跟:::类名套用，电源、负载、检测元件一眼可分，更接近专业图纸的阅读习惯。

  classDef power fill:#f90,stroke:#333 A[电源]:::power

• 一张图只讲一个主题：单图节点建议不超过 15 个。电路再大，也拆成几张图分别讲清楚——一张巨图画出来容易，读进去难。

复杂电路怎么拆：subgraph 分区法

真实电路往往是电源、控制、检测几个功能块拼起来的。subgraph（子图）语法能给每个功能块画一个「边框」，通用思路是 🧩：先画模块内部的节点和内部连线，跨模块的供电线、信号线统一放在整段图稿的最后。以「整流稳压电源 + MCU 控制 + 传感检测」为例：

三个subgraph把图切成三块，阅读顺序天然就是「先看模块内、后看模块间」：先想清楚有哪几个功能模块，再想模块之间有几根线。渲染后若觉得布局挤，把graph TB换成graph LR试试，差异很大；仍挤就拆成多张子图，用内容块引用把几张图串进同一篇笔记。

它画的是什么，不画什么

说句实话：Mermaid 画的是电路的逻辑结构图——模块框图、信号流向、连接关系。用它做方案记录、故障分析、教学演示，足够了。但如果要标准元件符号、引脚编号、网表这类能直接投产的工程原理图，仍需专业 EDA 工具。两者定位不同，并不冲突。

另外两点值得知道：源码是纯文本，拷进任何支持 Mermaid 的工具都能原样渲染，不存在锁定，Mermaid 画电路逻辑图是它最稳的用例之一；整篇笔记导出为 HTML / PDF 时，图表以矢量形式保留，导出流程会重新渲染图块，实现见 export 模块。

图不显示？先查这三处

• 为什么报错不渲染？Mermaid 对语法错误非常直接：一处报错，整块图不渲染，转而显示红色错误信息。最常见的三个原因——缩进里混入全角空格、节点 id 用了中文或特殊字符、漏写方括号。看到不渲染时，先读红色报错定位到具体行再动手，别盲目删改。
• 节点太多挤成一团怎么办？两个方向：把graph LR（左右）和graph TB（上下）互换试试，布局差异很大；或者按上一节的分区法拆成多张子图，再用内容块引用把几张图串进一篇笔记。
• 改一处图稿要重新截图吗？不用。文字即图纸：改一行文字，图自动跟着变；图稿是可版本化、可回溯的笔记内容，误删了也能从 SiYuan 的数据历史里找回来。

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

• 官方使用文档：README.zh-CN.md
• 渲染实现源码：mermaidRender.ts，Mermaid 引擎的加载与配置入口
• Mermaid 官方语法参考：官网 flowchart（流程图）章节

【免费下载链接】siyuanAn open-source, privacy-first, self-hosted knowledge workspace where humans and AI agents work together 开源、隐私优先、自托管的知识工作空间，让人与智能体在此协作项目地址: https://gitcode.com/GitHub_Trending/si/siyuan