All Writer

主题

图表支持 - v0.1.0 扩展功能 ​

All Writer 支持使用 Mermaid 语法创建各种类型的图表，让文档更加生动和直观。

功能特点 ​

📊 丰富的图表类型 ​

All Writer 支持 Mermaid 的多种图表类型：

  • 流程图：展示流程和决策过程
  • 序列图：展示系统交互时序
  • 甘特图：展示项目时间线
  • 类图：展示类之间的关系
  • 状态图：展示状态转换
  • 饼图：展示数据占比
  • Git 图：展示 Git 分支和提交

🎨 实时渲染 ​

  • 编辑时实时预览图表效果
  • 支持中文标签和描述
  • 自动调整图表大小

流程图 ​

流程图用于展示流程和决策过程。

基础流程图 ​

markdown
```mermaid
graph TD
    A[开始] --> B{判断条件}
    B -->|是| C[操作1]
    B -->|否| D[操作2]
    C --> E[结束]
    D --> E
```

效果：

mermaid
graph TD
    A[开始] --> B{判断条件}
    B -->|是| C[操作1]
    B -->|否| D[操作2]
    C --> E[结束]
    D --> E

流程图方向 ​

支持多种方向：

  • TD 或 TB：从上到下
  • BT：从下到上
  • LR：从左到右
  • RL：从右到左
markdown
```mermaid
graph LR
    A[开始] --> B[处理] --> C[结束]
```

节点形状 ​

  • [文本]：矩形
  • (文本)：圆角矩形
  • {文本}：菱形（判断）
  • ((文本))：圆形
  • >文本]：不对称形状
markdown
```mermaid
graph TD
    A[矩形] --> B(圆角矩形)
    B --> C{菱形}
    C --> D((圆形))
    D --> E>不对称]
```

序列图 ​

序列图用于展示系统之间的交互时序。

基础序列图 ​

markdown
```mermaid
sequenceDiagram
    participant 用户
    participant 前端
    participant 后端
    participant 数据库
    
    用户->>前端: 发送请求
    前端->>后端: API 调用
    后端->>数据库: 查询数据
    数据库-->>后端: 返回结果
    后端-->>前端: 返回响应
    前端-->>用户: 显示结果
```

效果：

mermaid
sequenceDiagram
    participant 用户
    participant 前端
    participant 后端
    participant 数据库
    
    用户->>前端: 发送请求
    前端->>后端: API 调用
    后端->>数据库: 查询数据
    数据库-->>后端: 返回结果
    后端-->>前端: 返回响应
    前端-->>用户: 显示结果

消息类型 ​

  • ->>：实线箭头（请求）
  • -->>：虚线箭头（响应）
  • ->：实线（同步）
  • -->：虚线（异步）

甘特图 ​

甘特图用于展示项目时间线和任务进度。

基础甘特图 ​

markdown
```mermaid
gantt
    title 项目开发计划
    dateFormat  YYYY-MM-DD
    section 设计阶段
    需求分析           :done,    des1, 2024-01-01, 2024-01-05
    原型设计           :done,    des2, 2024-01-06, 2024-01-10
    section 开发阶段
    前端开发           :active,  dev1, 2024-01-11, 2024-01-25
    后端开发           :         dev2, 2024-01-11, 2024-01-25
    section 测试阶段
    功能测试           :         test1, 2024-01-26, 2024-01-30
    性能测试           :         test2, 2024-01-31, 2024-02-05
```

类图 ​

类图用于展示类之间的关系。

基础类图 ​

markdown
```mermaid
classDiagram
    class 用户 {
        +String 姓名
        +String 邮箱
        +登录()
        +登出()
    }
    class 文档 {
        +String 标题
        +String 内容
        +保存()
        +导出()
    }
    用户 "1" --> "*" 文档 : 创建
```

状态图 ​

状态图用于展示状态转换。

基础状态图 ​

markdown
```mermaid
stateDiagram-v2
    [*] --> 草稿
    草稿 --> 审核中 : 提交
    审核中 --> 已发布 : 通过
    审核中 --> 草稿 : 退回
    已发布 --> [*]
```

饼图 ​

饼图用于展示数据占比。

基础饼图 ​

markdown
```mermaid
pie title 用户分布
    "Windows" : 60
    "macOS" : 25
    "Linux" : 15
```

Git 图 ​

Git 图用于展示 Git 分支和提交历史。

基础 Git 图 ​

markdown
```mermaid
gitgraph
    commit id: "初始提交"
    branch develop
    checkout develop
    commit id: "功能开发"
    checkout main
    merge develop
    commit id: "发布 v1.0"
```

使用技巧 ​

1. 中文支持 ​

Mermaid 完全支持中文标签和描述，可以直接使用中文：

markdown
```mermaid
graph TD
    A[开始处理] --> B{数据验证}
    B -->|通过| C[保存数据]
    B -->|失败| D[返回错误]
```

2. 样式自定义 ​

可以通过 HTML 和 CSS 自定义图表样式（需要导出为 HTML 后使用）。

3. 复杂图表 ​

对于复杂的图表，建议分步骤创建，先创建主要流程，再添加细节。

4. 图表大小 ​

图表会根据内容自动调整大小，如果图表过大，可以考虑拆分或简化。

常见问题 ​

Q: 支持哪些 Mermaid 图表类型？ ​

A: All Writer 支持 Mermaid 的主要图表类型，包括流程图、序列图、甘特图、类图、状态图、饼图、Git 图等。

Q: 图表可以导出吗？ ​

A: 可以。图表会随文档一起导出，在 HTML 和 PDF 格式中都能正常显示。

Q: 图表支持交互吗？ ​

A: 在 All Writer 中，图表是静态渲染的。导出为 HTML 后，某些图表类型可能支持交互功能。

Q: 如何调整图表大小？ ​

A: 图表大小会根据内容自动调整。如果需要更大的图表，可以增加节点数量或使用更详细的描述。

Q: 图表渲染失败怎么办？ ​

A: 检查 Mermaid 语法是否正确，确保代码块语言标记为 mermaid，并且语法符合 Mermaid 规范。

相关资源 ​

💡 提示：Mermaid 语法简单易学，建议从简单的流程图开始，逐步掌握更复杂的图表类型。

Copyright © 2025-present All Writer Team