尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

免插件,用 7 行 Mermaid 文本在 SiYuan 里画出电源电路图

免插件,用 7 行 Mermaid 文本在 SiYuan 里画出电源电路图 免插件用 7 行 Mermaid 文本在 SiYuan 里画出电源电路图【免费下载链接】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 渲染正文写 7 行文本就能出一张电路图矢量图可缩放、导出清晰还能跟着笔记一起同步和搜索。本文用一个真实案例全程跑一遍。按一个「/」键调出 Mermaid 块在复盘笔记的任意空行把光标停住按/键命令菜单弹出输入mermaid或「图表」回车代码块就插好了光标已在块内。手快的人也可以直接敲三个反引号加mermaid再回车效果一样。这是内置菜单项选项定义见 extend.ts开箱即用不用去市场下载。顺带一句同一个入口还能画流程图、时序图写法通用。两点提醒这个块和普通内容块没有区别可以移动、折叠、删除敲下第一行就开始渲染编辑态是文字加图形双视图切到预览就是干净的矢量图。写出 7 行最小串联回路直接输入下面 7 行graph LR声明从左到右布局括号里写元件名箭头就是导线这 7 行就是完整的 Mermaid 画电路图步骤后面两节只是给它加标注和拆模块。停手一拍块内立刻渲染出「交流输入 → 整流 → 滤波 → 稳压 → 负载 → 地」的串联回路最后一条F -- A把回路闭合。元件是节点、导线是箭头、方向靠首行声明——这就是文本画图最基础的形态。渲染产物是 SVG放大多少倍都不糊渲染逻辑在 mermaidRender.ts 里深色主题跟随和自适应宽度都是默认开启。给连线标上电压值、给元件上色串联骨架只是雏形故障复盘要读得懂还得补两类信息连线上标数值。在箭头两端加竖线写文字如B --|330V DC| C。示例里的|220V|、|300V DC|就是这种用法电压等级、电流方向、线号标在线上图的信息量一下就上来了元件分色。用classDef定义样式类再在节点上用:::套用把这两行追加到上一个块的末尾「交流输入」节点就变成橙色。电源、控制、检测三类元件各配一个颜色看过框图的人一眼就能分清楚。建议一张图的节点控制在 15 个以内一张图讲清一个主题比一张巨型全图更容易读进去。用 subgraph 拆模块图不渲染先排错 用 subgraph 把电源、控制、检测框成三块真实复盘不止一条电源轨还有控制和检测模块。用subgraph给每个模块画个框框内先连本模块的节点三个框把图切成三块跨模块的供电线D -- E恰好落在框与框的边界上。节点多到挤成一团时先把首行graph TB改成graph LR试试左右和上下布局差异很大还不行就拆成多张图再用块引用在一篇笔记里串起来。图不渲染时先看红色报错Mermaid 的表现很直接语法错了不画半张图而是整块显示红色错误信息。常见肇事者有三类缩进里混进全角空格或全角括号复制粘贴是重灾区节点 id 用了中文或特殊字符——括号里的显示文字随便写但括号前的 id 建议保持字母数字漏了方括号或箭头。最小动作看报错定位到行号在代码里找到那一行只改它、不动其他行。改砸了也不慌笔记文本都在工作区里数据历史可以回滚把图带出去引用、搜索、导出 图画完就是一个普通内容块三条路都走得通引用嵌入。任意笔记里输入((搜索「整流桥」嵌入原始块原图改一处所有引用处同步更新。右侧 Backlinks 面板能看到谁引用了这个块关系图谱里也能看到它的位置直接搜索。全文索引覆盖 Mermaid 块内的文字搜「220V」能直接翻出这篇复盘笔记导出或复制。右键笔记选 Export输出 HTML 或 PDF图表以矢量形式保留实现见 export 模块也可以选中代码块直接复制纯文本粘到任何支持 Mermaid 的工具里复用——源码是纯文本不存在锁定。最后把边界说清楚Mermaid 输出的是逻辑结构图——模块框图、信号流向、连接关系做方案记录、故障分析、教学足够带电阻符号、引脚编号、网表的工程原理图仍要交给专业 EDA 工具。定位不同互不冲突。参考资料官方中文文档README.zh-CN.mdMermaid 渲染实现源码app/src/protyle/render/mermaidRender.tsMermaid 官方语法参考mermaid.js.org 站点的 Flowchart 章节【免费下载链接】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),仅供参考
返回列表