跳到主要内容

DSL 图表

用DSL(领域特定语言 Domain-Specific Language)描述图表:左侧写代码、右侧实时预览。适合流程图、架构图、数据图等需要可版本化源码的场景。

界面入口名:图表编辑器

开启入口

  1. 进入 设置 → 偏好设置
  2. 打开 图表编辑器 开关。
  3. 回到笔记编辑器,附件上传菜单里会出现 图表编辑器

新建与打开

  1. 打开笔记编辑器 → 附件上传菜单 → 图表编辑器
  2. 顶部用下拉选择图表语言(不同的语言有不同的语法);左侧编辑源码,右侧预览

保存后为SVG无损矢量图片,可点击二次编辑。

各图类型怎么建

在顶栏语言下拉里选择类型,然后在左侧写入对应 DSL。多数类型旁有官方文档链接按钮,可点开查语法。

界面选项怎么建
Mermaid写 Mermaid 源码(流程图、时序图等)
字符版Mermaid写字符版 Mermaid;输出 ASCII / 字符风格图。不能导出 SVG;中文可能错位
echarts图只填 option 里的 JSON(不要包整段多余外壳)
infographic信息图用信息图 DSL 描述(AntV Infographic)
plantuml写 PlantUML
graphviz写 DOT
d2写 D2
dbml写数据库结构描述
erd写 ER 图 DSL
nomnoml写 nomnoml
c4plantuml写 C4-PlantUML

一键填充示例

编辑器里有一个 填充示例 按钮(代码区为空时显示),点击后会自动填入当前图表语言的示例代码,方便快速上手。

示例:新建 ECharts

  1. 语言选 echarts图
  2. 左侧只贴 option JSON,例如:
{
"xAxis": { "type": "category", "data": ["A", "B", "C"] },
"yAxis": { "type": "value" },
"series": [{ "type": "bar", "data": [1, 2, 3] }]
}
  1. 预览通过后 保存插入代码块到笔记(这种情况下不会生成实际的附件)。

AI 编辑 / 创建 AI

底部 AI 栏(账号可用 AI 时显示)。

AI 编辑 / 创建有两个模式:编辑(基于现有代码修改)和 创建(完全重新生成)。

保存与插入笔记

操作按钮结果
存成附件保存导出 SVG 挂到笔记;之后可再打开二次编辑(字符版Mermaid 无此按钮)
插入正文插入代码块到笔记把当前源码以对应语言的代码块插入笔记正文,与文字混排

小提示

  • ECharts 只填 option JSON。
  • 信息图如果自己写的话,底部有交互式配置样式的菜单