图表支持 — Mermaid、ECharts、Graphviz、五线谱

总览

NoteGen 的 Markdown 编辑器内置了多种图表语法渲染：

Mermaid 流程图

最常用的图表类型，用简单的文本语法画流程图：

flowchart TD A[随手记录] --> B{筛选整理} B --> C[AI 生成笔记] C --> D[人工审阅润色] D --> E[保存同步]

渲染后会变成可交互的流程图。支持点击节点、缩放、平移。

Mermaid 时序图

sequenceDiagram用户->>NoteGen: 截图记录NoteGen->>OCR 模型: 发送图片OCR 模型-->>NoteGen: 返回文字NoteGen->>AI: 生成描述AI-->>NoteGen: 返回描述NoteGen-->>用户: 保存记录

Mermaid 甘特图

gantt title 研究计划section 阅读收集资料 :a1, 2026-10-01, 7d整理摘录 :after a1, 5d section 写作草稿 :2026-10-15, 5d润色 :2026-10-22, 3d

ECharts 图表

NoteGen 也支持 ECharts JSON 配置来画更复杂的数据图表，比如折线图、饼图、柱状图、雷达图等。

{ "type": "pie", "data": [ {"name": "记录", "value": 45}, {"name": "写作", "value": 30}, {"name": "AI", "value": 15}, {"name": "画布", "value": 10} ] }

除了手动写 JSON，也可以在画布工作区让 AI 帮你生成可编辑图表，再导出或嵌到文章里。

Graphviz 图

Graphviz 适合画复杂的有向图/无向图：

digraph { A -> B; B -> C; C -> A; }

五线谱

音乐相关内容可以用 abc.js 的语法画简单五线谱：

X: 1 T: NoteGen Song C: 4/4 K: C C D E F G A B c

在整理中的使用

整理模板中可以要求 AI 在生成 Markdown 时用 Mermaid 语法画流程图。比如"整理为会议纪要，并用 Mermaid 流程图画出决策逻辑"。AI 生成的 Mermaid 代码会在写作页自动渲染。