SiYuan 笔记 Mermaid 电路图7 行文本 5 分钟出矢量逻辑框图零插件上手【免费下载链接】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 回车代码块就位。在块里敲入下面 5 行。停手页面立刻渲染出放大的矢量图最左是交流电源中间两个元件最右是回路端。一句话记住规则graph LR定走向从左到右方括号里是元件名--是导线。画最小回路就够用了。每行代码到底在干嘛——5 个语法点逐条拆第一张图出来后回头看看每一行各干了什么一共五种你敲graph LR→ 整张图从左往右排改成graph TB就是从上往下。你敲P1[交流电源]→ 图上多一个元件框P1是内部代号括号里的字是显示名。你敲P1 -- R1→ 两个元件之间连上一根单向导线。你敲P1 --|220V AC| R1→ 导线上挂出220V AC标签标电压、电流、线号都靠它。你敲classDef src fill:#f5a623再给节点加:::src→ 该元件染成橙色电源、检测件一眼分开。就这五种够了。节点数量建议控制在 15 个以内一张图只讲一个主题。元件多了怎么不乱subgraph 拆多模块电路框图真实电路基本都是几个功能模块加模块之间的几根线。给每个模块套一个 subgraph子图相当于给一组节点画个框图就自然分块把它当盖楼来看先画每层楼里的房间框内元件最后再画楼梯跨模块的线。读者的眼睛先扫框内再顺着框间箭头走阅读路线一目了然。图不渲染或挤成一团——Mermaid 电路逻辑图渲染不出的排查图没出来别慌Mermaid 报错很直白红色提示里带着行号。最常见的三个元凶——缩进里混进全角空格、节点 id 带中文或特殊字符、漏了方括号。照提示定位到那一行改别乱删。节点一多就糊先换布局方向graph LR和graph TB排出来的效果差很多。还挤就拆成 2~3 张小图用内容块引用串起来读者一次只看一个主题。能当工程原理图用吗答案直说不能。它画的是逻辑框图——信号流向、模块连接、供电路径清清楚楚。精确到电阻符号、引脚编号、网表的工程图仍交给 EDA 工具。两者分工不同各干各的。拿走 / 分享 / 继续看选中渲染出的图直接复制粘贴进聊天窗口或文档。右键 → Export把整篇笔记导成 HTML / PDF图表按矢量保留放大不糊。Mermaid 文本纯文字拷给任何支持 Mermaid 的工具都能直接渲染。参考资料官方中文文档README.zh-CN.md渲染实现源码app/src/protyle/render/mermaidRender.tsMermaid 官方语法文档flowchart 章节现在打开 SiYuan敲/10 秒内看到你的第一张图。【免费下载链接】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），仅供参考