在Markdown里直接画出漂亮图表：ZenNotes六大图表Mermaid、KaTeX、TikZ实战教程

在Markdown里直接画出漂亮图表ZenNotes六大图表Mermaid、KaTeX、TikZ实战教程【免费下载链接】zennotesKeyboard-first local Markdown notes with Vim motions, diagrams, and MCP integration.项目地址: https://gitcode.com/gh_mirrors/zenn/zennotesZenNotes是一款键盘优先的本地 Markdown 笔记应用它最大的惊喜之一是不用离开编辑器、不用任何插件就能在 Markdown 里直接渲染 Mermaid 图表、KaTeX 公式、TikZ 矢量图、JSXGraph 交互几何、function-plot 函数图像和 Excalidraw 手绘白板——所有图表都以普通代码块形式保存在.md文件里可版本控制、可 diff、可迁移。这篇实战教程带你逐个上手这六大数据可视化工具。六大图表能力一览 图表类型语法适合场景Mermaidtikz代码块坐标图、交换图、出版级矢量图JSXGraphjsxgraph代码块可拖拽的交互几何function-plotfunction-plot代码块简洁的笛卡尔函数绘图Excalidraw.excalidraw文件嵌入手绘白板、自由绘图官方内置帮助对这套能力的描述非常直白源码可见 help.tsMath, diagrams, and plots render from plain fences 一节预览与源码渲染管线在 markdown.ts 中完成。一、Mermaid流程图与甘特图一步到位打开任意笔记输入三个反引号 mermaid直接写声明式文本保存后预览与分屏模式下立即出现渲染好的流程图支持流程图、时序图、状态图、甘特图和类图。更贴心的是开启实时预览时编辑区里图表会直接顶替代码块显示光标移进去才还原成源码——这一交互由 cm-mermaid-render.ts 实现让你边改边看不用来回切换模式。二、KaTeX行内公式与编号推导数学公式只需美元符号行内$\alpha$、块级$$…$$均可默认由 KaTeX 排版并在编辑器中实时渲染见 cm-math-render.ts。写数学时有两点很实用自动补全在公式区域输入两个字母会弹出希腊字母、运算符、集合与函数的渲染预览frac等带参命令自动插入可编辑片段公式编号KaTeX 渲染器会为每个equation环境按文档顺序自动编号编辑区与预览区编号一致。另外在 Settings ▸ Editor ▸ Math renderer 里可切换到Typst排版引擎读取同样的$…$语法块适合已熟悉 Typst 语法的用户。三、TikZLaTeX 原生插图离线渲染tikz代码块交给本地 TeX 引擎编译成 SVG——完全在设备上运行无需联网特别适合坐标系统、交换图commutative diagram和插图级质量的数据图。渲染逻辑在 diagram-renderers.ts 中自动把黑色/灰色等常用 xcolor 默认色映射到当前主题色板深色模式下依然清晰可读支持 ⌘/Ctrl 滚轮缩放、拖拽平移、双击复位点 Expand 按钮可弹出更大的模态视图查看细节。写论文笔记、给概念图配出版级插图时TikZ 是六件套里精度最高的一档。四、JSXGraph可拖拽的交互几何jsxgraph代码块接收一段小型 JSON 配置即可生成可交互的几何板。配置里用boundingbox定义坐标范围、objects列出要创建的对象对象之间还能用id互相引用{ boundingbox: [-5, 5, 5, -5], objects: [ { id: a, type: point, args: [1, 2, A] }, { type: line, args: [a, [4, 0]] } ] }渲染器diagram-renderers.ts会自动继承主题色绘制坐标轴与网格并开启原生拖拽缩放——学生做几何笔记时可以真的拖着点动线段这是静态图表给不了的。五、function-plot三行配置画出函数图像只想画函数曲线function-plot代码块同样吃 JSON 配置比 JSXGraph 更轻量grid: true默认开启。适合物理、数学笔记里随手插入的笛卡尔函数图像渲染入口见 diagram-renderers.ts。六、Excalidraw手绘白板嵌入笔记前五种是代码出图Excalidraw 则是鼠标出图。从命令面板执行New Drawing即可创建一个.excalidraw文件它会像普通笔记一样出现在侧边栏、可移动可归档并在专用标签页打开内置编辑器绘制完成后在笔记里用和嵌入图片完全相同的语法引用它![[name.excalidraw]]还支持![[name.excalidraw|600x400]]这样的尺寸提示。嵌入在编辑区和阅读区都渲染为 PNG 预览改图后实时刷新点击则在新标签页打开编辑器见 help.ts。Obsidian 风格的.excalidraw.md文件也兼容从 Obsidian 迁移的用户无感切换。通用技巧与源码地图 ️图表即纯文本六个图表在磁盘上都是普通 Markdown 代码块换任何编辑器打开仍是完整源码可移植、可 diffExpand 大视图TikZ / JSXGraph / function-plot 均带工具栏可放大查看内联视图支持 ⌘/Ctrl 滚轮缩放与拖拽平移inline-diagram-pan-zoom.ts按需加载三类数学图表引擎懒加载且缓存笔记里没有 JSXGraph 代码块就绝不会导入对应库独立图表标签页图表可通过内部路由zen://diagram/以独立标签打开diagram-tabs.ts方便多图表并排对照主题自适应切换明暗主题后图表自动重着色深色背景下文字不会消失。想深入阅读渲染管线推荐从 diagram-renderers.ts 和 cm-mermaid-render.ts 两个文件入手再配合 docs/README.md 中的官方文档索引即可完整掌握 ZenNotes 的图表体系。现在打开 ZenNotes敲下第一个mermaid你的笔记就拥有了一整套出版级的画图工具箱 ✍️。【免费下载链接】zennotesKeyboard-first local Markdown notes with Vim motions, diagrams, and MCP integration.项目地址: https://gitcode.com/gh_mirrors/zenn/zennotes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考