01 · Engines
先根据内容选择图表引擎
Choose the engine that fits the content
Mermaid 适合结构、关系、过程与计划；ECharts 适合数值比较、趋势、分布和指标。两种图表都只保存在当前 Markdown 文件中。
Mermaid is for structure, relationships, processes, and plans. ECharts is for comparisons, trends, distributions, and metrics. Both remain inside the Markdown file.
流程图、时序图、架构图、ER 图、甘特图、思维导图等 22 种结构图。
22 structural templates including flow, sequence, architecture, ER, Gantt, and mindmap.
柱状、折线、散点、热力、箱线、气泡、仪表盘、词云等 15 种数据图。
15 data templates including bar, line, scatter, heatmap, box plot, bubble, gauge, and word cloud.
02 · Workflow
从模板到 Markdown，只需要五步
From template to Markdown in five steps
进入编辑模式，点击“更多格式 → 图表生成器”。
In editing mode, choose More Formats → Diagram Builder.
按流程、软件、数据或知识分类缩小范围。
Narrow the list by process, software, data, or knowledge.
选择最接近目标的案例，生成器会载入完整源码。
Pick the closest example and load its complete source.
修改 Mermaid 文本或 ECharts JSON，右侧立即检查结果。
Edit Mermaid text or ECharts JSON and inspect the live result.
点击插入，源码以标准围栏代码块写入当前位置。
Insert the standard fenced block at the current cursor.
03 · Source
两种标准围栏写法
Two standard fenced formats
Mermaid 围栏内写图形语法；ECharts 围栏内写 JSON 配置。源码始终可以继续手工编辑。
Write diagram syntax inside Mermaid fences and JSON options inside ECharts fences. The source always remains editable.
```mermaidflowchart LR
A[开始] --> B{检查}
B --> C[完成]```echarts{
"xAxis": {"data": ["一", "二"]},
"yAxis": {},
"series": [{"type": "bar", "data": [42, 58]}]
}04 · Complete catalog
全部 37 个图表案例
All 37 diagram examples
清单与桌面软件当前模板源同步。可按分类筛选；展开任意卡片查看完整中英文源码，并复制为可直接粘贴的 Markdown。
Synchronized with the desktop template source. Filter by category, open any card for full bilingual source, and copy paste-ready Markdown.
业务流程、审批逻辑、程序路径和决策分支。
Business processes, approvals, execution paths, and decisions.
flowchart LR A([收到需求]) --> B{资料是否完整} B -- 是 --> C[进入开发] B -- 否 --> D[补充资料]flowchart LR A([Receive request]) --> B{Information complete?} B -- Yes --> C[Start development] B -- No --> D[Complete information]
查看完整源码与使用Full source and usage+
复制后粘贴到 Markdown，或在软件“图表生成器”中继续修改并实时预览。
Copy into Markdown, or keep editing with live preview in Diagram Builder.
```mermaid flowchart LR A([收到需求]) --> B{资料是否完整} B -- 是 --> C[进入开发] B -- 否 --> D[补充资料] D --> B C --> E[测试验收] E --> F([发布完成]) ``````mermaid flowchart LR A([Receive request]) --> B{Information complete?} B -- Yes --> C[Start development] B -- No --> D[Complete information] D --> B C --> E[Test and accept] E --> F([Release]) ```
接口调用、登录过程以及客户端和服务器的交互顺序。
API calls, login flows, and ordered client-server interactions.
sequenceDiagram autonumber actor U as 用户 participant A as 轻阅 MarkdownsequenceDiagram autonumber actor U as User participant A as Quillite Markdown
查看完整源码与使用Full source and usage+
复制后粘贴到 Markdown，或在软件“图表生成器”中继续修改并实时预览。
Copy into Markdown, or keep editing with live preview in Diagram Builder.
```mermaid sequenceDiagram autonumber actor U as 用户 participant A as 轻阅 Markdown participant F as 本地文件 U->>A: 选择 Markdown 文档 A->>F: 请求读取文件 F-->>A: 返回文档内容 A-->>U: 显示实时预览 ``````mermaid sequenceDiagram autonumber actor U as User participant A as Quillite Markdown participant F as Local file U->>A: Select a Markdown document A->>F: Read file F-->>A: Return content A-->>U: Show live preview ```
项目排期、研发计划、任务依赖和里程碑。
Project schedules, task dependencies, and milestones.
gantt title 版本发布计划 dateFormat YYYY-MM-DD excludes weekendsgantt title Release plan dateFormat YYYY-MM-DD excludes weekends
查看完整源码与使用Full source and usage+
复制后粘贴到 Markdown，或在软件“图表生成器”中继续修改并实时预览。
Copy into Markdown, or keep editing with live preview in Diagram Builder.
```mermaid gantt title 版本发布计划 dateFormat YYYY-MM-DD excludes weekends section 规划 需求分析 :done, plan, 2026-08-21, 2d section 实施 功能开发 :active, dev, after plan, 4d 测试验收 :test, after dev, 2d 正式发布 :milestone, release, after test, 0d ``````mermaid gantt title Release plan dateFormat YYYY-MM-DD excludes weekends section Planning Requirements :done, plan, 2026-08-21, 2d section Delivery Development :active, dev, after plan, 4d Testing :test, after dev, 2d Release :milestone, release, after test, 0d ```
订单、页面或文档的状态机和生命周期。
State machines and lifecycles for orders, pages, or documents.
stateDiagram-v2 [*] --> 未打开 未打开 --> 阅读中 : 打开文档 阅读中 --> 编辑中 : 点击编辑stateDiagram-v2 [*] --> Closed Closed --> Reading : Open document Reading --> Editing : Edit
查看完整源码与使用Full source and usage+
复制后粘贴到 Markdown，或在软件“图表生成器”中继续修改并实时预览。
Copy into Markdown, or keep editing with live preview in Diagram Builder.
```mermaid stateDiagram-v2 [*] --> 未打开 未打开 --> 阅读中 : 打开文档 阅读中 --> 编辑中 : 点击编辑 编辑中 --> 已保存 : 保存 已保存 --> 阅读中 : 返回预览 阅读中 --> [*] : 关闭文档 ``````mermaid stateDiagram-v2 [*] --> Closed Closed --> Reading : Open document Reading --> Editing : Edit Editing --> Saved : Save Saved --> Reading : Preview Reading --> [*] : Close ```
用户体验、服务流程和各步骤满意度。
User experience, service flows, and satisfaction by step.
journey title 用户阅读与编辑体验 section 打开文档 选择文件: 5: 用户journey title Reading and editing experience section Open document Select file: 5: User
查看完整源码与使用Full source and usage+
复制后粘贴到 Markdown，或在软件“图表生成器”中继续修改并实时预览。
Copy into Markdown, or keep editing with live preview in Diagram Builder.
```mermaid journey title 用户阅读与编辑体验 section 打开文档 选择文件: 5: 用户 加载预览: 4: 应用 section 编辑文档 修改内容: 5: 用户 实时预览: 5: 用户, 应用 自动保存: 4: 应用 ``````mermaid journey title Reading and editing experience section Open document Select file: 5: User Load preview: 4: App section Edit document Change content: 5: User Live preview: 5: User, App Autosave: 4: App ```
产品发展、事件历史和阶段性成果。
Product evolution, event history, and milestones.
timeline title 产品功能演进 2026 Q1 : Markdown 阅读 : 最近阅读timeline title Product evolution 2026 Q1 : Markdown reading : Recent documents
查看完整源码与使用Full source and usage+
复制后粘贴到 Markdown，或在软件“图表生成器”中继续修改并实时预览。
Copy into Markdown, or keep editing with live preview in Diagram Builder.
```mermaid timeline title 产品功能演进 2026 Q1 : Markdown 阅读 : 最近阅读 2026 Q2 : 实时编辑 : Word 与 PDF 导出 2026 Q3 : 学科公式 : Mermaid 图表 ``````mermaid timeline title Product evolution 2026 Q1 : Markdown reading : Recent documents 2026 Q2 : Live editing : Word and PDF export 2026 Q3 : Academic formulas : Mermaid diagrams ```
待办、进行中、测试中和已完成任务。
Tasks grouped by backlog, progress, testing, and completion.
kanban todo[待处理] task1[撰写功能需求] task2[设计交互界面]kanban todo[To do] task1[Write requirements] task2[Design interface]
查看完整源码与使用Full source and usage+
复制后粘贴到 Markdown，或在软件“图表生成器”中继续修改并实时预览。
Copy into Markdown, or keep editing with live preview in Diagram Builder.
```mermaid kanban todo[待处理] task1[撰写功能需求] task2[设计交互界面] doing[进行中] task3[开发 Mermaid 图表] testing[测试中] task4[检查导出效果] done[已完成] task5[实时预览] ``````mermaid kanban todo[To do] task1[Write requirements] task2[Design interface] doing[In progress] task3[Build Mermaid diagrams] testing[Testing] task4[Verify export] done[Done] task5[Live preview] ```
类属性、方法和面向对象关系。
Class properties, methods, and object-oriented relationships.
classDiagram class Document { +String path +String contentclassDiagram class Document { +String path +String content
查看完整源码与使用Full source and usage+
复制后粘贴到 Markdown，或在软件“图表生成器”中继续修改并实时预览。
Copy into Markdown, or keep editing with live preview in Diagram Builder.
```mermaid classDiagram class Document { +String path +String content +open() +save() } class Editor { +renderPreview() +exportWord() } Document "1" --> "1" Editor : 在编辑器中打开 ``````mermaid classDiagram class Document { +String path +String content +open() +save() } class Editor { +renderPreview() +exportWord() } Document "1" --> "1" Editor : opens in ```
数据库表结构、字段和一对多关系。
Database entities, fields, and cardinality.
erDiagram USER ||--o{ DOCUMENT : creates DOCUMENT ||--o{ REVISION : contains USER {erDiagram USER ||--o{ DOCUMENT : creates DOCUMENT ||--o{ REVISION : contains USER {
查看完整源码与使用Full source and usage+
复制后粘贴到 Markdown，或在软件“图表生成器”中继续修改并实时预览。
Copy into Markdown, or keep editing with live preview in Diagram Builder.
```mermaid erDiagram USER ||--o{ DOCUMENT : creates DOCUMENT ||--o{ REVISION : contains USER { string id PK string name } DOCUMENT { string id PK string title string path } REVISION { string id PK datetime saved_at } ``````mermaid erDiagram USER ||--o{ DOCUMENT : creates DOCUMENT ||--o{ REVISION : contains USER { string id PK string name } DOCUMENT { string id PK string title string path } REVISION { string id PK datetime saved_at } ```
软件需求、验证方法以及组件追踪关系。
Software requirements, verification methods, and traceability.
requirementDiagram requirement fast_preview { id: REQ001 text: Preview_updates_within_300_msrequirementDiagram requirement fast_preview { id: REQ001 text: Preview_updates_within_300_ms
查看完整源码与使用Full source and usage+
复制后粘贴到 Markdown，或在软件“图表生成器”中继续修改并实时预览。
Copy into Markdown, or keep editing with live preview in Diagram Builder.
```mermaid requirementDiagram requirement fast_preview { id: REQ001 text: Preview_updates_within_300_ms risk: medium verifymethod: test } element editor { type: software docref: renderer } editor - satisfies -> fast_preview ``````mermaid requirementDiagram requirement fast_preview { id: REQ001 text: Preview_updates_within_300_ms risk: medium verifymethod: test } element editor { type: software docref: renderer } editor - satisfies -> fast_preview ```
版本分支、提交记录和合并过程。
Branches, commits, and merge history.
gitGraph commit id: "初始化项目" branch develop checkout developgitGraph commit id: "Initial project" branch develop checkout develop
查看完整源码与使用Full source and usage+
复制后粘贴到 Markdown，或在软件“图表生成器”中继续修改并实时预览。
Copy into Markdown, or keep editing with live preview in Diagram Builder.
```mermaid gitGraph commit id: "初始化项目" branch develop checkout develop commit id: "开发图表功能" commit id: "补充测试" checkout main merge develop commit id: "发布新版本" tag: "v2.4.9" ``````mermaid gitGraph commit id: "Initial project" branch develop checkout develop commit id: "Build diagrams" commit id: "Add tests" checkout main merge develop commit id: "Release" tag: "v2.4.9" ```
系统模块、硬件模块和数据处理管线。
System modules, hardware blocks, and data pipelines.
block-beta columns 3 input["Markdown 文件"] parser["解析器"] preview["实时预览"] input --> parserblock-beta columns 3 input["Markdown file"] parser["Parser"] preview["Live preview"] input --> parser
查看完整源码与使用Full source and usage+
复制后粘贴到 Markdown，或在软件“图表生成器”中继续修改并实时预览。
Copy into Markdown, or keep editing with live preview in Diagram Builder.
```mermaid block-beta columns 3 input["Markdown 文件"] parser["解析器"] preview["实时预览"] input --> parser parser --> preview ``````mermaid block-beta columns 3 input["Markdown file"] parser["Parser"] preview["Live preview"] input --> parser parser --> preview ```
网络协议、二进制数据和字段位宽。
Network protocols, binary data, and bit fields.
packet-beta 0-15: "源端口" 16-31: "目标端口" 32-47: "数据长度"packet-beta 0-15: "Source port" 16-31: "Destination port" 32-47: "Data length"
查看完整源码与使用Full source and usage+
复制后粘贴到 Markdown，或在软件“图表生成器”中继续修改并实时预览。
Copy into Markdown, or keep editing with live preview in Diagram Builder.
```mermaid packet-beta 0-15: "源端口" 16-31: "目标端口" 32-47: "数据长度" 48-63: "校验和" ``````mermaid packet-beta 0-15: "Source port" 16-31: "Destination port" 32-47: "Data length" 48-63: "Checksum" ```
系统服务、模块分组、存储与连接关系。
Services, module groups, storage, and connections.
architecture-beta group desktop(cloud)[Desktop] service editor(server)[Editor] in desktop service preview(internet)[Preview] in desktoparchitecture-beta group desktop(cloud)[Desktop] service editor(server)[Editor] in desktop service preview(internet)[Preview] in desktop
查看完整源码与使用Full source and usage+
复制后粘贴到 Markdown，或在软件“图表生成器”中继续修改并实时预览。
Copy into Markdown, or keep editing with live preview in Diagram Builder.
```mermaid architecture-beta group desktop(cloud)[Desktop] service editor(server)[Editor] in desktop service preview(internet)[Preview] in desktop service file(database)[File] in desktop editor:R -- L:file editor:R -- L:preview ``````mermaid architecture-beta group desktop(cloud)[Desktop] service editor(server)[Editor] in desktop service preview(internet)[Preview] in desktop service file(database)[File] in desktop editor:R -- L:file editor:R -- L:preview ```
从用户和外部系统视角说明软件边界。
System boundaries viewed through users and external dependencies.
C4Context title 轻阅 Markdown 系统上下文 Person(user, "用户", "阅读和编辑本地 Markdown 文档") System(app, "轻阅 Markdown", "跨平台 Markdown 阅读编辑器")C4Context title Quillite Markdown system context Person(user, "User", "Reads and edits local Markdown") System(app, "Quillite Markdown", "Cross-platform Markdown reader and editor")
查看完整源码与使用Full source and usage+
复制后粘贴到 Markdown，或在软件“图表生成器”中继续修改并实时预览。
Copy into Markdown, or keep editing with live preview in Diagram Builder.
```mermaid C4Context title 轻阅 Markdown 系统上下文 Person(user, "用户", "阅读和编辑本地 Markdown 文档") System(app, "轻阅 Markdown", "跨平台 Markdown 阅读编辑器") System_Ext(site, "官方网站", "提供教程、版本与下载") Rel(user, app, "打开、阅读和编辑") Rel(app, site, "检查更新", "HTTPS") ``````mermaid C4Context title Quillite Markdown system context Person(user, "User", "Reads and edits local Markdown") System(app, "Quillite Markdown", "Cross-platform Markdown reader and editor") System_Ext(site, "Official website", "Guides, releases, and downloads") Rel(user, app, "Open, read, and edit") Rel(app, site, "Check for updates", "HTTPS") ```
分类占比和构成比例。
Category proportions and composition.
pie showData title 文档类型占比 "技术文档" : 45 "项目方案" : 25pie showData title Document types "Technical" : 45 "Projects" : 25
查看完整源码与使用Full source and usage+
复制后粘贴到 Markdown，或在软件“图表生成器”中继续修改并实时预览。
Copy into Markdown, or keep editing with live preview in Diagram Builder.
```mermaid pie showData title 文档类型占比 "技术文档" : 45 "项目方案" : 25 "学习笔记" : 20 "其他" : 10 ``````mermaid pie showData title Document types "Technical" : 45 "Projects" : 25 "Notes" : 20 "Other" : 10 ```
任务优先级、产品定位和二维指标。
Prioritization, positioning, and two-dimensional metrics.
quadrantChart title Task value and urgency x-axis Low value --> High value y-axis Low urgency --> High urgencyquadrantChart title Task value and urgency x-axis Low value --> High value y-axis Low urgency --> High urgency
查看完整源码与使用Full source and usage+
复制后粘贴到 Markdown，或在软件“图表生成器”中继续修改并实时预览。
Copy into Markdown, or keep editing with live preview in Diagram Builder.
```mermaid quadrantChart title Task value and urgency x-axis Low value --> High value y-axis Low urgency --> High urgency quadrant-1 Do first quadrant-2 Quick wins quadrant-3 Defer quadrant-4 Plan Fix crash: [0.92, 0.88] Update docs: [0.58, 0.35] Polish icon: [0.32, 0.42] ``````mermaid quadrantChart title Task value and urgency x-axis Low value --> High value y-axis Low urgency --> High urgency quadrant-1 Do first quadrant-2 Quick wins quadrant-3 Defer quadrant-4 Plan Fix crash: [0.92, 0.88] Update docs: [0.58, 0.35] Polish icon: [0.32, 0.42] ```
趋势折线、数量柱状图和多组数据对比。
Line trends, bars, and series comparisons.
xychart-beta title "每月打开文档数" x-axis [Jan, Feb, Mar, Apr, May, Jun] y-axis "Documents" 0 --> 120xychart-beta title "Documents opened monthly" x-axis [Jan, Feb, Mar, Apr, May, Jun] y-axis "Documents" 0 --> 120
查看完整源码与使用Full source and usage+
复制后粘贴到 Markdown，或在软件“图表生成器”中继续修改并实时预览。
Copy into Markdown, or keep editing with live preview in Diagram Builder.
```mermaid xychart-beta title "每月打开文档数" x-axis [Jan, Feb, Mar, Apr, May, Jun] y-axis "Documents" 0 --> 120 bar [45, 62, 78, 70, 95, 112] line [40, 58, 72, 82, 92, 108] ``````mermaid xychart-beta title "Documents opened monthly" x-axis [Jan, Feb, Mar, Apr, May, Jun] y-axis "Documents" 0 --> 120 bar [45, 62, 78, 70, 95, 112] line [40, 58, 72, 82, 92, 108] ```
流量、能量、资金或数据的去向与占比。
Flow and distribution of traffic, energy, money, or data.
sankey-beta Markdown,Parser,100 Parser,Preview,70 Parser,WordExport,15sankey-beta Markdown,Parser,100 Parser,Preview,70 Parser,WordExport,15
查看完整源码与使用Full source and usage+
复制后粘贴到 Markdown，或在软件“图表生成器”中继续修改并实时预览。
Copy into Markdown, or keep editing with live preview in Diagram Builder.
```mermaid sankey-beta Markdown,Parser,100 Parser,Preview,70 Parser,WordExport,15 Parser,HTMLExport,15 ``````mermaid sankey-beta Markdown,Parser,100 Parser,Preview,70 Parser,WordExport,15 Parser,HTMLExport,15 ```
多维能力评估和指标综合对比。
Multi-dimensional capability and metric comparisons.
radar-beta title 轻阅 Markdown 能力分布 axis speed["速度"], preview["预览"], export["导出"], theme["主题"], local["本地"] curve quillite["轻阅"]{95, 90, 82, 88, 100}radar-beta title Quillite Markdown capabilities axis speed["Speed"], preview["Preview"], export["Export"], theme["Themes"], local["Local"] curve quillite["Quillite"]{95, 90, 82, 88, 100}
查看完整源码与使用Full source and usage+
复制后粘贴到 Markdown，或在软件“图表生成器”中继续修改并实时预览。
Copy into Markdown, or keep editing with live preview in Diagram Builder.
```mermaid radar-beta title 轻阅 Markdown 能力分布 axis speed["速度"], preview["预览"], export["导出"], theme["主题"], local["本地"] curve quillite["轻阅"]{95, 90, 82, 88, 100} max 100 min 0 ``````mermaid radar-beta title Quillite Markdown capabilities axis speed["Speed"], preview["Preview"], export["Export"], theme["Themes"], local["Local"] curve quillite["Quillite"]{95, 90, 82, 88, 100} max 100 min 0 ```
用面积展示层级数据和各部分占比。
Hierarchical data represented by proportional areas.
treemap-beta "轻阅 Markdown" "阅读": 35 "编辑": 30treemap-beta "Quillite Markdown" "Reading": 35 "Editing": 30
查看完整源码与使用Full source and usage+
复制后粘贴到 Markdown，或在软件“图表生成器”中继续修改并实时预览。
Copy into Markdown, or keep editing with live preview in Diagram Builder.
```mermaid treemap-beta "轻阅 Markdown" "阅读": 35 "编辑": 30 "导出": 20 "图表": 15 ``````mermaid treemap-beta "Quillite Markdown" "Reading": 35 "Editing": 30 "Export": 20 "Diagrams": 15 ```
比较不同分类的数量、金额或频次。
Compare values, amounts, or frequencies across categories.
{ "title": { "text": "月度文档数量", "left": "center"{ "title": { "text": "Monthly documents", "left": "center"
查看完整源码与使用Full source and usage+
复制后粘贴到 Markdown，或在软件“图表生成器”中继续修改并实时预览。
Copy into Markdown, or keep editing with live preview in Diagram Builder.
```echarts { "title": { "text": "月度文档数量", "left": "center" }, "tooltip": { "trigger": "axis" }, "xAxis": { "type": "category", "data": [ "一月", "二月", "三月", "四月", "五月", "六月" ] }, "yAxis": { "type": "value", "name": "文档数" }, "series": [ { "name": "文档数", "type": "bar", "data": [ 42, 58, 76, 69, 91, 108 ] } ] } ``````echarts { "title": { "text": "Monthly documents", "left": "center" }, "tooltip": { "trigger": "axis" }, "xAxis": { "type": "category", "data": [ "Jan", "Feb", "Mar", "Apr", "May", "Jun" ] }, "yAxis": { "type": "value", "name": "Documents" }, "series": [ { "name": "Documents", "type": "bar", "data": [ 42, 58, 76, 69, 91, 108 ] } ] } ```
展示连续时间内的趋势和变化速度。
Show trends and rates of change over continuous time.
{ "title": { "text": "阅读时长趋势", "left": "center"{ "title": { "text": "Reading time trend", "left": "center"
查看完整源码与使用Full source and usage+
复制后粘贴到 Markdown，或在软件“图表生成器”中继续修改并实时预览。
Copy into Markdown, or keep editing with live preview in Diagram Builder.
```echarts { "title": { "text": "阅读时长趋势", "left": "center" }, "tooltip": { "trigger": "axis" }, "xAxis": { "type": "category", "boundaryGap": false, "data": [ "周一", "周二", "周三", "周四", "周五", "周六", "周日" ] }, "yAxis": { "type": "value", "name": "分钟" }, "series": [ { "name": "阅读时长", "type": "line", "data": [ 18, 26, 21, 34, 42, 55, 48 ] } ] } ``````echarts { "title": { "text": "Reading time trend", "left": "center" }, "tooltip": { "trigger": "axis" }, "xAxis": { "type": "category", "boundaryGap": false, "data": [ "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun" ] }, "yAxis": { "type": "value", "name": "Minutes" }, "series": [ { "name": "Reading time", "type": "line", "data": [ 18, 26, 21, 34, 42, 55, 48 ] } ] } ```
同时比较总量和各组成部分。
Compare totals and their composition at the same time.
{ "title": { "text": "导出类型分布", "left": "center"{ "title": { "text": "Export format distribution", "left": "center"
查看完整源码与使用Full source and usage+
复制后粘贴到 Markdown，或在软件“图表生成器”中继续修改并实时预览。
Copy into Markdown, or keep editing with live preview in Diagram Builder.
```echarts { "title": { "text": "导出类型分布", "left": "center" }, "tooltip": { "trigger": "axis" }, "legend": { "top": 30 }, "xAxis": { "type": "category", "data": [ "一季度", "二季度", "三季度", "四季度" ] }, "yAxis": { "type": "value" }, "series": [ { "name": "Word", "type": "bar", "stack": "total", "data": [ 32, 41, 48, 53 ] }, { "name": "PDF", "type": "bar", "stack": "total", "data": [ 24, 30, 39, 45 ] }, { "name": "HTML", "type": "bar", "stack": "total", "data": [ 12, 18, 21, 27 ] } ] } ``````echarts { "title": { "text": "Export format distribution", "left": "center" }, "tooltip": { "trigger": "axis" }, "legend": { "top": 30 }, "xAxis": { "type": "category", "data": [ "Q1", "Q2", "Q3", "Q4" ] }, "yAxis": { "type": "value" }, "series": [ { "name": "Word", "type": "bar", "stack": "total", "data": [ 32, 41, 48, 53 ] }, { "name": "PDF", "type": "bar", "stack": "total", "data": [ 24, 30, 39, 45 ] }, { "name": "HTML", "type": "bar", "stack": "total", "data": [ 12, 18, 21, 27 ] } ] } ```
突出趋势变化和累计规模。
Emphasize trend changes and cumulative magnitude.
{ "title": { "text": "累计阅读量", "left": "center"{ "title": { "text": "Cumulative reads", "left": "center"
查看完整源码与使用Full source and usage+
复制后粘贴到 Markdown，或在软件“图表生成器”中继续修改并实时预览。
Copy into Markdown, or keep editing with live preview in Diagram Builder.
```echarts { "title": { "text": "累计阅读量", "left": "center" }, "tooltip": { "trigger": "axis" }, "xAxis": { "type": "category", "boundaryGap": false, "data": [ "一月", "二月", "三月", "四月", "五月", "六月" ] }, "yAxis": { "type": "value", "name": "篇次" }, "series": [ { "name": "阅读量", "type": "line", "smooth": true, "areaStyle": {}, "data": [ 120, 182, 251, 334, 442, 581 ] } ] } ``````echarts { "title": { "text": "Cumulative reads", "left": "center" }, "tooltip": { "trigger": "axis" }, "xAxis": { "type": "category", "boundaryGap": false, "data": [ "Jan", "Feb", "Mar", "Apr", "May", "Jun" ] }, "yAxis": { "type": "value", "name": "Reads" }, "series": [ { "name": "Reads", "type": "line", "smooth": true, "areaStyle": {}, "data": [ 120, 182, 251, 334, 442, 581 ] } ] } ```
观察两个连续变量之间的相关性和离群点。
Inspect correlation and outliers between two continuous variables.
{ "title": { "text": "文档长度与阅读时长", "left": "center"{ "title": { "text": "Document length vs reading time", "left": "center"
查看完整源码与使用Full source and usage+
复制后粘贴到 Markdown，或在软件“图表生成器”中继续修改并实时预览。
Copy into Markdown, or keep editing with live preview in Diagram Builder.
```echarts { "title": { "text": "文档长度与阅读时长", "left": "center" }, "tooltip": { "trigger": "item" }, "grid": { "left": 62, "right": 76, "top": 62, "bottom": 58, "containLabel": true }, "xAxis": { "type": "value", "name": "字数（千字）", "nameLocation": "middle", "nameGap": 30 }, "yAxis": { "type": "value", "name": "阅读时长（分钟）", "nameLocation": "middle", "nameGap": 38 }, "series": [ { "name": "文档", "type": "scatter", "symbolSize": 15, "data": [ [ 1.2, 4 ], [ 2.4, 7 ], [ 3.1, 9 ], [ 4.8, 16 ], [ 5.4, 14 ], [ 7.2, 23 ], [ 8.5, 28 ] ] } ] } ``````echarts { "title": { "text": "Document length vs reading time", "left": "center" }, "tooltip": { "trigger": "item" }, "grid": { "left": 72, "right": 80, "top": 62, "bottom": 62, "containLabel": true }, "xAxis": { "type": "value", "name": "Words (thousands)", "nameLocation": "middle", "nameGap": 32 }, "yAxis": { "type": "value", "name": "Reading time (minutes)", "nameLocation": "middle", "nameGap": 44 }, "series": [ { "name": "Documents", "type": "scatter", "symbolSize": 15, "data": [ [ 1.2, 4 ], [ 2.4, 7 ], [ 3.1, 9 ], [ 4.8, 16 ], [ 5.4, 14 ], [ 7.2, 23 ], [ 8.5, 28 ] ] } ] } ```
从中心线向左右比较两组相反或对立指标。
Compare opposing values extending left and right from a shared baseline.
{ "title": { "text": "功能满意与不满意对比", "left": "center"{ "title": { "text": "Satisfied vs dissatisfied", "left": "center"
查看完整源码与使用Full source and usage+
复制后粘贴到 Markdown，或在软件“图表生成器”中继续修改并实时预览。
Copy into Markdown, or keep editing with live preview in Diagram Builder.
```echarts { "title": { "text": "功能满意与不满意对比", "left": "center" }, "tooltip": { "trigger": "axis" }, "legend": { "top": 30 }, "grid": { "left": 92, "right": 76, "top": 72, "bottom": 56, "containLabel": true }, "xAxis": { "type": "value", "min": -100, "max": 100, "name": "比例（%）", "nameLocation": "middle", "nameGap": 30 }, "yAxis": { "type": "category", "data": [ "阅读体验", "编辑体验", "导出功能", "主题外观" ] }, "series": [ { "name": "不满意", "type": "bar", "stack": "compare", "data": [ -18, -24, -31, -12 ] }, { "name": "满意", "type": "bar", "stack": "compare", "data": [ 78, 72, 64, 85 ] } ] } ``````echarts { "title": { "text": "Satisfied vs dissatisfied", "left": "center" }, "tooltip": { "trigger": "axis" }, "legend": { "top": 30 }, "grid": { "left": 92, "right": 82, "top": 72, "bottom": 56, "containLabel": true }, "xAxis": { "type": "value", "min": -100, "max": 100, "name": "Percent", "nameLocation": "middle", "nameGap": 30 }, "yAxis": { "type": "category", "data": [ "Reading", "Editing", "Export", "Appearance" ] }, "series": [ { "name": "Dissatisfied", "type": "bar", "stack": "compare", "data": [ -18, -24, -31, -12 ] }, { "name": "Satisfied", "type": "bar", "stack": "compare", "data": [ 78, 72, 64, 85 ] } ] } ```
使用双坐标轴同时展示规模和变化率。
Use dual axes to show magnitude and rate together.
{ "title": { "text": "下载量与增长率", "left": "center"{ "title": { "text": "Downloads and growth rate", "left": "center"
查看完整源码与使用Full source and usage+
复制后粘贴到 Markdown，或在软件“图表生成器”中继续修改并实时预览。
Copy into Markdown, or keep editing with live preview in Diagram Builder.
```echarts { "title": { "text": "下载量与增长率", "left": "center" }, "tooltip": { "trigger": "axis" }, "legend": { "top": 30 }, "xAxis": { "type": "category", "data": [ "一月", "二月", "三月", "四月", "五月", "六月" ] }, "yAxis": [ { "type": "value", "name": "下载量" }, { "type": "value", "name": "增长率（%）" } ], "series": [ { "name": "下载量", "type": "bar", "data": [ 320, 410, 520, 610, 780, 920 ] }, { "name": "增长率", "type": "line", "yAxisIndex": 1, "data": [ 8, 12, 15, 11, 19, 18 ] } ] } ``````echarts { "title": { "text": "Downloads and growth rate", "left": "center" }, "tooltip": { "trigger": "axis" }, "legend": { "top": 30 }, "xAxis": { "type": "category", "data": [ "Jan", "Feb", "Mar", "Apr", "May", "Jun" ] }, "yAxis": [ { "type": "value", "name": "Downloads" }, { "type": "value", "name": "Growth (%)" } ], "series": [ { "name": "Downloads", "type": "bar", "data": [ 320, 410, 520, 610, 780, 920 ] }, { "name": "Growth", "type": "line", "yAxisIndex": 1, "data": [ 8, 12, 15, 11, 19, 18 ] } ] } ```
展示流程各阶段的转化和流失。
Show conversion and drop-off across process stages.
{ "title": { "text": "用户转化漏斗", "left": "center"{ "title": { "text": "User conversion funnel", "left": "center"
查看完整源码与使用Full source and usage+
复制后粘贴到 Markdown，或在软件“图表生成器”中继续修改并实时预览。
Copy into Markdown, or keep editing with live preview in Diagram Builder.
```echarts { "title": { "text": "用户转化漏斗", "left": "center" }, "tooltip": { "trigger": "item" }, "series": [ { "name": "转化", "type": "funnel", "top": 55, "bottom": 20, "label": { "show": true, "position": "inside" }, "data": [ { "value": 100, "name": "访问官网" }, { "value": 72, "name": "下载安装" }, { "value": 54, "name": "首次打开" }, { "value": 41, "name": "持续使用" } ] } ] } ``````echarts { "title": { "text": "User conversion funnel", "left": "center" }, "tooltip": { "trigger": "item" }, "series": [ { "name": "Conversion", "type": "funnel", "top": 55, "bottom": 20, "label": { "show": true, "position": "inside" }, "data": [ { "value": 100, "name": "Visit website" }, { "value": 72, "name": "Download" }, { "value": 54, "name": "First launch" }, { "value": 41, "name": "Retained" } ] } ] } ```
用颜色深浅展示二维数据密度或相关程度。
Use color intensity to show two-dimensional density or correlation.
{ "__quillite": { "height": 460 },{ "__quillite": { "height": 460 },
查看完整源码与使用Full source and usage+
复制后粘贴到 Markdown，或在软件“图表生成器”中继续修改并实时预览。
Copy into Markdown, or keep editing with live preview in Diagram Builder.
```echarts { "__quillite": { "height": 460 }, "title": { "text": "每周阅读热力", "left": "center" }, "tooltip": { "position": "top" }, "grid": { "top": 60, "left": 80, "right": 38, "bottom": 108, "containLabel": true }, "xAxis": { "type": "category", "data": [ "上午", "中午", "下午", "晚上" ] }, "yAxis": { "type": "category", "data": [ "周一", "周二", "周三", "周四", "周五" ] }, "visualMap": { "min": 0, "max": 10, "calculable": true, "orient": "horizontal", "left": "center", "bottom": 8 }, "series": [ { "type": "heatmap", "data": [ [ 0, 0, 2 ], [ 1, 0, 5 ], [ 2, 0, 7 ], [ 3, 0, 4 ], [ 0, 1, 3 ], [ 1, 1, 8 ], [ 2, 1, 6 ], [ 3, 1, 9 ], [ 0, 2, 1 ], [ 1, 2, 4 ], [ 2, 2, 8 ], [ 3, 2, 7 ], [ 0, 3, 4 ], [ 1, 3, 6 ], [ 2, 3, 9 ], [ 3, 3, 8 ], [ 0, 4, 2 ], [ 1, 4, 5 ], [ 2, 4, 7 ], [ 3, 4, 10 ] ], "label": { "show": true } } ] } ``````echarts { "__quillite": { "height": 460 }, "title": { "text": "Weekly reading heatmap", "left": "center" }, "tooltip": { "position": "top" }, "grid": { "top": 60, "left": 80, "right": 38, "bottom": 108, "containLabel": true }, "xAxis": { "type": "category", "data": [ "Morning", "Noon", "Afternoon", "Evening" ] }, "yAxis": { "type": "category", "data": [ "Mon", "Tue", "Wed", "Thu", "Fri" ] }, "visualMap": { "min": 0, "max": 10, "calculable": true, "orient": "horizontal", "left": "center", "bottom": 8 }, "series": [ { "type": "heatmap", "data": [ [ 0, 0, 2 ], [ 1, 0, 5 ], [ 2, 0, 7 ], [ 3, 0, 4 ], [ 0, 1, 3 ], [ 1, 1, 8 ], [ 2, 1, 6 ], [ 3, 1, 9 ], [ 0, 2, 1 ], [ 1, 2, 4 ], [ 2, 2, 8 ], [ 3, 2, 7 ], [ 0, 3, 4 ], [ 1, 3, 6 ], [ 2, 3, 9 ], [ 3, 3, 8 ], [ 0, 4, 2 ], [ 1, 4, 5 ], [ 2, 4, 7 ], [ 3, 4, 10 ] ], "label": { "show": true } } ] } ```
展示数据分布、中位数、四分位数和异常范围。
Show distributions, medians, quartiles, and ranges.
{ "title": { "text": "不同文档类型阅读时长分布", "left": "center"{ "title": { "text": "Reading time distribution", "left": "center"
查看完整源码与使用Full source and usage+
复制后粘贴到 Markdown，或在软件“图表生成器”中继续修改并实时预览。
Copy into Markdown, or keep editing with live preview in Diagram Builder.
```echarts { "title": { "text": "不同文档类型阅读时长分布", "left": "center" }, "tooltip": { "trigger": "item" }, "xAxis": { "type": "category", "data": [ "技术文档", "项目方案", "学习笔记", "会议记录" ] }, "yAxis": { "type": "value", "name": "分钟" }, "series": [ { "name": "阅读时长", "type": "boxplot", "data": [ [ 3, 6, 10, 15, 24 ], [ 4, 8, 12, 19, 30 ], [ 2, 5, 8, 13, 20 ], [ 1, 3, 6, 9, 15 ] ] } ] } ``````echarts { "title": { "text": "Reading time distribution", "left": "center" }, "tooltip": { "trigger": "item" }, "xAxis": { "type": "category", "data": [ "Technical", "Project", "Notes", "Meetings" ] }, "yAxis": { "type": "value", "name": "Minutes" }, "series": [ { "name": "Reading time", "type": "boxplot", "data": [ [ 3, 6, 10, 15, 24 ], [ 4, 8, 12, 19, 30 ], [ 2, 5, 8, 13, 20 ], [ 1, 3, 6, 9, 15 ] ] } ] } ```
通过横轴、纵轴和气泡大小同时比较三个指标。
Compare three measures through x, y, and bubble size.
{ "__quillite": { "transform": "bubble", "height": 460{ "__quillite": { "transform": "bubble", "height": 460
查看完整源码与使用Full source and usage+
复制后粘贴到 Markdown，或在软件“图表生成器”中继续修改并实时预览。
Copy into Markdown, or keep editing with live preview in Diagram Builder.
```echarts { "__quillite": { "transform": "bubble", "height": 460 }, "title": { "text": "文档价值分析", "left": "center" }, "tooltip": { "trigger": "item" }, "grid": { "left": 72, "right": 72, "top": 70, "bottom": 66, "containLabel": true }, "xAxis": { "type": "value", "name": "使用频率", "nameLocation": "middle", "nameGap": 32 }, "yAxis": { "type": "value", "name": "平均阅读时长", "nameLocation": "middle", "nameGap": 42 }, "series": [ { "name": "文档", "type": "scatter", "data": [ [ 20, 12, 18, "说明文档" ], [ 45, 18, 32, "项目方案" ], [ 72, 28, 46, "知识库" ], [ 58, 10, 24, "会议记录" ], [ 86, 22, 38, "操作手册" ] ] } ] } ``````echarts { "__quillite": { "transform": "bubble", "height": 460 }, "title": { "text": "Document value analysis", "left": "center" }, "tooltip": { "trigger": "item" }, "grid": { "left": 82, "right": 78, "top": 70, "bottom": 70, "containLabel": true }, "xAxis": { "type": "value", "name": "Usage frequency", "nameLocation": "middle", "nameGap": 34 }, "yAxis": { "type": "value", "name": "Average reading time", "nameLocation": "middle", "nameGap": 48 }, "series": [ { "name": "Documents", "type": "scatter", "data": [ [ 20, 12, 18, "Guide" ], [ 45, 18, 32, "Plan" ], [ 72, 28, 46, "Knowledge base" ], [ 58, 10, 24, "Meeting notes" ], [ 86, 22, 38, "Manual" ] ] } ] } ```
突出展示单个关键指标的完成度或状态。
Highlight the completion or status of one key metric.
{ "title": { "text": "本月目标完成率", "left": "center"{ "title": { "text": "Monthly target completion", "left": "center"
查看完整源码与使用Full source and usage+
复制后粘贴到 Markdown，或在软件“图表生成器”中继续修改并实时预览。
Copy into Markdown, or keep editing with live preview in Diagram Builder.
```echarts { "title": { "text": "本月目标完成率", "left": "center" }, "series": [ { "type": "gauge", "center": [ "50%", "58%" ], "progress": { "show": true, "width": 18 }, "axisLine": { "lineStyle": { "width": 18 } }, "detail": { "valueAnimation": true, "formatter": "{value}%", "fontSize": 26 }, "data": [ { "value": 78, "name": "完成率" } ] } ] } ``````echarts { "title": { "text": "Monthly target completion", "left": "center" }, "series": [ { "type": "gauge", "center": [ "50%", "58%" ], "progress": { "show": true, "width": 18 }, "axisLine": { "lineStyle": { "width": 18 } }, "detail": { "valueAnimation": true, "formatter": "{value}%", "fontSize": 26 }, "data": [ { "value": 78, "name": "Completion" } ] } ] } ```
以环形结构展示分类占比，并在中心保留说明空间。
Show proportions in a ring with room for a central summary.
{ "__quillite": { "height": 460 },{ "__quillite": { "height": 460 },
查看完整源码与使用Full source and usage+
复制后粘贴到 Markdown，或在软件“图表生成器”中继续修改并实时预览。
Copy into Markdown, or keep editing with live preview in Diagram Builder.
```echarts { "__quillite": { "height": 460 }, "title": { "text": "文档来源占比", "left": "center" }, "tooltip": { "trigger": "item" }, "legend": { "bottom": 4, "left": "center" }, "series": [ { "name": "来源", "type": "pie", "radius": [ "38%", "62%" ], "center": [ "50%", "48%" ], "label": { "formatter": "{b}\n{d}%" }, "data": [ { "value": 46, "name": "本地创建" }, { "value": 28, "name": "团队共享" }, { "value": 16, "name": "即时通讯" }, { "value": 10, "name": "其他" } ] } ] } ``````echarts { "__quillite": { "height": 460 }, "title": { "text": "Document sources", "left": "center" }, "tooltip": { "trigger": "item" }, "legend": { "bottom": 4, "left": "center" }, "series": [ { "name": "Source", "type": "pie", "radius": [ "38%", "62%" ], "center": [ "50%", "48%" ], "label": { "formatter": "{b}\n{d}%" }, "data": [ { "value": 46, "name": "Created locally" }, { "value": 28, "name": "Team shared" }, { "value": 16, "name": "Messaging" }, { "value": 10, "name": "Other" } ] } ] } ```
展示一个总量经过连续增减后的变化过程。
Show how sequential gains and losses change a total.
{ "title": { "text": "月度用户变化", "left": "center"{ "title": { "text": "Monthly user change", "left": "center"
查看完整源码与使用Full source and usage+
复制后粘贴到 Markdown，或在软件“图表生成器”中继续修改并实时预览。
Copy into Markdown, or keep editing with live preview in Diagram Builder.
```echarts { "title": { "text": "月度用户变化", "left": "center" }, "tooltip": { "trigger": "axis" }, "xAxis": { "type": "category", "data": [ "期初", "新增", "回流", "流失", "停用", "期末" ] }, "yAxis": { "type": "value", "name": "用户数" }, "series": [ { "name": "辅助", "type": "bar", "stack": "total", "itemStyle": { "color": "transparent" }, "data": [ 0, 1200, 1530, 1280, 1160, 0 ] }, { "name": "增加", "type": "bar", "stack": "total", "data": [ 1200, 330, 170, "-", "-", 1090 ] }, { "name": "减少", "type": "bar", "stack": "total", "data": [ "-", "-", "-", 250, 120, "-" ] } ] } ``````echarts { "title": { "text": "Monthly user change", "left": "center" }, "tooltip": { "trigger": "axis" }, "xAxis": { "type": "category", "data": [ "Opening", "New", "Returned", "Lost", "Inactive", "Closing" ] }, "yAxis": { "type": "value", "name": "Users" }, "series": [ { "name": "Helper", "type": "bar", "stack": "total", "itemStyle": { "color": "transparent" }, "data": [ 0, 1200, 1530, 1280, 1160, 0 ] }, { "name": "Increase", "type": "bar", "stack": "total", "data": [ 1200, 330, 170, "-", "-", 1090 ] }, { "name": "Decrease", "type": "bar", "stack": "total", "data": [ "-", "-", "-", 250, 120, "-" ] } ] } ```
根据词频突出关键词和主题分布。
Emphasize keywords and topic distribution by frequency.
{ "title": { "text": "Markdown 关键词", "left": "center"{ "title": { "text": "Markdown keywords", "left": "center"
查看完整源码与使用Full source and usage+
复制后粘贴到 Markdown，或在软件“图表生成器”中继续修改并实时预览。
Copy into Markdown, or keep editing with live preview in Diagram Builder.
```echarts { "title": { "text": "Markdown 关键词", "left": "center" }, "tooltip": { "show": true }, "series": [ { "type": "wordCloud", "shape": "circle", "gridSize": 14, "sizeRange": [ 16, 46 ], "rotationRange": [ 0, 0 ], "data": [ { "name": "Markdown", "value": 100 }, { "name": "本地优先", "value": 82 }, { "name": "实时预览", "value": 76 }, { "name": "轻量", "value": 70 }, { "name": "开源", "value": 66 }, { "name": "学科公式", "value": 58 }, { "name": "图表", "value": 54 }, { "name": "Word 导出", "value": 46 }, { "name": "PDF", "value": 42 }, { "name": "跨平台", "value": 38 } ] } ] } ``````echarts { "title": { "text": "Markdown keywords", "left": "center" }, "tooltip": { "show": true }, "series": [ { "type": "wordCloud", "shape": "circle", "gridSize": 14, "sizeRange": [ 16, 46 ], "rotationRange": [ 0, 0 ], "data": [ { "name": "Markdown", "value": 100 }, { "name": "Local first", "value": 82 }, { "name": "Live preview", "value": 76 }, { "name": "Lightweight", "value": 70 }, { "name": "Open source", "value": 66 }, { "name": "Formulas", "value": 58 }, { "name": "Diagrams", "value": 54 }, { "name": "Word export", "value": 46 }, { "name": "PDF", "value": 42 }, { "name": "Cross-platform", "value": 38 } ] } ] } ```
知识整理、功能拆解、头脑风暴和文章大纲。
Knowledge organization, feature breakdowns, and outlines.
mindmap root((轻阅 Markdown)) 阅读 实时预览mindmap root((Quillite Markdown)) Read Live preview
查看完整源码与使用Full source and usage+
复制后粘贴到 Markdown，或在软件“图表生成器”中继续修改并实时预览。
Copy into Markdown, or keep editing with live preview in Diagram Builder.
```mermaid mindmap root((轻阅 Markdown)) 阅读 实时预览 目录定位 收藏文档 编辑 语法高亮 自动保存 学科公式 导出 Word PDF HTML ``````mermaid mindmap root((Quillite Markdown)) Read Live preview Outline navigation Favorites Edit Syntax highlighting Autosave Academic formulas Export Word PDF HTML ```
当前分类暂无案例。No examples in this group.
05 · Troubleshooting
图表没有正确显示时
When a diagram does not render
- 确认围栏名称是
mermaid或echarts，并使用三个反引号闭合。 - Mermaid 对缩进和关键字敏感，先从最小模板逐步修改。
- ECharts 必须是合法 JSON：属性名与字符串使用双引号，最后一项后不要加逗号。
- 单个图表报错只影响当前图表，不影响文档其他内容。
- 导出 Word / HTML 时图表转为清晰图片；PDF 使用系统打印流程。
- Use a
mermaidorechartsfence and close it with three backticks. - Mermaid is sensitive to keywords and indentation; modify a small template incrementally.
- ECharts must be valid JSON with double-quoted keys and no trailing commas.
- A broken diagram affects only its own region.
- Word / HTML exports convert diagrams to clear images; PDF uses system printing.
进入编辑模式，打开“更多格式 → 图表生成器”。
Enter editing mode and open More Formats → Diagram Builder.