SiYuan Mermaid 画图指南：三步从文本到专业电路图-创锋一号

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 里能画什么

先把能力边界说清楚：你在代码块里写的是文本，渲染出来的却是矢量图，放大到多大都不糊。引擎内置在 SiYuan 的渲染器里（app/src/protyle/export/index.ts导出时也会自动重渲染这些图表），无需你额外安装任何组件。它覆盖的场景主要是：

流程图（graph）：画架构、流程，也能画出电源—电阻—负载这类基础电路图
时序图（sequence）：多角色交互，还能自动给每条消息加序号
甘特图（gantt）：排期类的时间线

一句话：凡是用箭头和节点能描述的图，基本都在它的能力圈里。

三步画出第一张 Mermaid 电路图

🎯 先跑通一个最小例子，画一个"电源→电阻→灯泡"的串联电路。

光标停在正文，输入/唤起命令菜单，输入mermaid选中对应项，代码块即刻生成
把下面这几行敲进代码块
稍等一秒，图就渲染出来了

graph LR A[电源 +] --> B[电阻 R1] B --> C[灯泡 L1] C --> D[电源 -]

三个尖括号节点是元件，-->箭头表示走向。整段只有五行，这就是你以后所有复杂图的起点。

把 Mermaid 图画得更专业

光能画还不算完，两张图往文档里一放，"颜色乱"和"一团线"是两个最显廉价的问题。

技巧一：classDef 一次定义，全局套用。手写style给每个节点单独调色，加新元件就得补一条；而classDef定义的是"样式类"，最后一行把节点名挂上去即可。效果：所有元件自动同款配色，后续新增节点颜色永远不跑偏。

graph LR A[电源] --> B[电阻] B --> C[灯泡] classDef comp fill:#f9f,stroke:#333,stroke-width:2px class A,B,C comp

技巧二：subgraph 给复杂模块划边界。图一多，连线就会交叉成毛线团。用subgraph把电源、控制、传感三块各自圈起来再连线。效果：模块边界清晰，别人扫一眼就能看懂图在讲几个部分。

graph TB subgraph 电源 A[整流] --> B[滤波] B --> C[稳压 +5V] end subgraph 控制 D[MCU] --> E[继电器] end C --> D

SiYuan Mermaid 图的实时预览效果

看结果之前，值得说一句体感：上面每段代码改一个字符，图会立即跟着重画。把 R1 改成 R2、给电源模块添一个节点，都是改文本的事，不存在"打开画图工具再挪一个框"的环节。做设计记录或课件时，这种即时反馈会把重复劳动压到最低。

笔记图表导出：三种分享方式

图画好了，怎么给别人？三条路：

复制渲染后的 SVG：矢量格式，贴进其他文档或网页，任意缩放都清晰，适合写技术博客、内部 Wiki
导出 PNG / PDF：走 SiYuan 的笔记导出功能，导出流程会自动处理图表尺寸与样式，适合打印报告、论文插图
带走 Mermaid 源码：代码块本身就是纯文本，拷给同样用 SiYuan 或任何支持 Mermaid 的工具，对方打开就能看到同一张图——图随文走，永不失联

适合谁，以及去哪查语法

硬件工程师整理设计笔记、学生做实验记录、写技术文档需要架构图和时序图的人，都值得把这套流程用起来。语法拿不准时，查仓库自带的README.zh-CN.md和docs/SY-FORMAT.zh-CN.md，或者打开 Mermaid 官网语法参考对照着敲。先照着"三步出图"画一张最小的，十分钟你就会回来感谢这个习惯。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

企业官网建设流程全解析