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 -- DSiYuan Mermaid 图的实时预览效果看结果之前值得说一句体感上面每段代码改一个字符图会立即跟着重画。把 R1 改成 R2、给电源模块添一个节点都是改文本的事不存在打开画图工具再挪一个框的环节。做设计记录或课件时这种即时反馈会把重复劳动压到最低。笔记图表导出三种分享方式图画好了怎么给别人三条路复制渲染后的 SVG矢量格式贴进其他文档或网页任意缩放都清晰适合写技术博客、内部 Wiki导出 PNG / PDF走 SiYuan 的笔记导出功能导出流程会自动处理图表尺寸与样式适合打印报告、论文插图带走 Mermaid 源码代码块本身就是纯文本拷给同样用 SiYuan 或任何支持 Mermaid 的工具对方打开就能看到同一张图——图随文走永不失联适合谁以及去哪查语法硬件工程师整理设计笔记、学生做实验记录、写技术文档需要架构图和时序图的人都值得把这套流程用起来。语法拿不准时查仓库自带的README.zh-CN.md和docs/SY-FORMAT.zh-CN.md或者打开 Mermaid 官网语法参考对照着敲。先照着三步出图画一张最小的十分钟你就会回来感谢这个习惯。【免费下载链接】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），仅供参考