办公必备技能——AI画图表、技术图-课多多

日常办公我们经常会用到各种图表，但是每次做图表，就会让我萌生退却的想法。作为一个对细节有洁癖的完美主义者，光是对齐、排版就能耗费大量时间。
但有了AI后，这一切都变得轻松起来，只需用自然语言描述需求，AI便能快速生成PlantUML、Mermaid等主流图表语法，再借助飞书、语雀等平台一键渲染。
不满意的地方还能随时让AI调整优化，大大提升了效率，让专注力回归内容本身。

Mermaid

Mermaid是一款基于JavaScript的图表绘制工具，采用类似Markdown的简洁语法，将文本描述渲染成SVG格式的图表，最终呈现给用户直观、专业的可视化效果。

AI生成图表

请帮我用Mermaid生成一个智能家居的状态图，要求如下：....

图表语法生图

飞书文档

网址：https://docs.feishu.cn/

打开飞书文档，添加 – 文本绘图，粘贴Mermaid语法代码即可，生成出来后还可以右键复制图片。

语雀

网址：https://www.yuque.com/

打开语雀文档，添加 – 文本绘图，选择合适的图表语法（PlantUML、Mermaid、Flowchart、Graphviz），粘贴代码即可。

Min2k

网址：https://www.min2k.com/tools/mermaid/

支持导入Mermaid，并导出Png、Svg，转成draw.io等多种格式。

Mermaid-live

网址：https://mermaid-live.nodejs.cn/

支持导入Mermaid，并导出Png、Svg。

Mermaid编辑器

网址：https://mermaid.d.foundation/

支持导出Png、Svg，可以将SVG拖拽/插入-图片，导入到Visio。

支持的图表：

定时图（Timing Diagram）
时序图（Sequence Diagram）
用例图（Use Case）
类图（Class Diagram）
流程图（Flow Chart）
活动图（Activity Diagram）
组件图（Component Diagram）
状态图（State Diagram）
对象图（Object Diagram）
部署图（Deployment Diagram）
ER图（ER Diagram）
甘特图（Gantt）
饼图（Pie Chart）
系统架构图（Architecture Diagram）

图表示例

时序图-在线支付流程

Mermaid

sequenceDiagram
    participant 用户
    participant 商城
    participant 支付网关
    participant 银行
    
    用户->>商城: 选择商品并下单
    商城->>商城: 生成订单
    商城->>用户: 返回订单信息和支付链接
    用户->>支付网关: 跳转到支付页面
    支付网关->>用户: 显示支付方式选择
    用户->>支付网关: 选择支付方式并输入信息
    支付网关->>银行: 发送支付请求
    银行->>银行: 验证账户信息
    银行->>支付网关: 返回支付结果
    支付网关->>商城: 通知支付结果
    支付网关->>用户: 显示支付结果
    商城->>商城: 更新订单状态
    商城->>用户: 发送订单确认通知

PlantUML

@startuml
skinparam handwritten true
skinparam monochrome true

actor 用户
participant 商城
participant 支付网关
participant 银行

用户 -> 商城: 选择商品并下单
商城 -> 商城: 生成订单
商城 --> 用户: 返回订单信息和支付链接
用户 -> 支付网关: 跳转到支付页面
支付网关 --> 用户: 显示支付方式选择
用户 -> 支付网关: 选择支付方式并输入信息
支付网关 -> 银行: 发送支付请求
银行 -> 银行: 验证账户信息
银行 --> 支付网关: 返回支付结果
支付网关 -> 商城: 通知支付结果
支付网关 --> 用户: 显示支付结果
商城 -> 商城: 更新订单状态
商城 --> 用户: 发送订单确认通知

@enduml