用AI绘制各类图表，大大提升你的工作效率

知识库对于团队，公司来讲至关重要，通常由于时间紧任务多很多都是能省则省，当新人入职时学习成本陡然增加，或者离职时都没有像样的文档传承，总结三点不愿留档的原因：

缺乏时间：产品经理或开发者可能认为画时序图和流程图等会耗费大量时间，而他们更愿意将时间用于其他工作任务上。
缺乏技能：有些产品经理或开发者可能不擅长画时序图和流程图等，或者不了解其重要性，因此他们可能不愿意花时间和精力去学习和应用这些技能。
没有明确的需求：有时候产品经理和开发者可能觉得画时序图和流程图并不是必要的步骤，或者觉得已经有足够的信息来进行开发工作，因此他们可能会忽视这一步骤。

一、使用 Mermaid 绘制图表

Mermaid 是一个基于 Javascript 的图表绘制工具，通过解析类 Markdown 的文本语法来实现图表的创建和动态修改。Mermaid 诞生的主要目的是让文档的更新能够及时跟上开发进度。

绘图和编写文档花费了开发者宝贵的开发时间，而且随着业务的变更，它很快就会过期。但是如果缺少了图表或文档，对于生产力和团队新人的业务学习都会产生巨大的阻碍。 Mermaid 通过允许用户创建便于修改的图表来解决这一难题，它也可以作为生产脚本（或其他代码）的一部分。 Mermaid 甚至能让非程序员也能通过 Mermaid Live Editor 轻松创建详细的图表。

如果想要查看关于 Mermaid 更详细的介绍及基础使用方式，可以查看入门指引, 用法和教程.

同类软件：PlantUML、gravizo

Mermaid 示例：

流程图

flowchart LR
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]

时序图

sequenceDiagram
Alice->>John: Hello John, how are you?
loop Healthcheck
    John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!

用户体验旅程图

  journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 3: Me

类图

classDiagram
    Class01  <|-- AveryLongClass : Cool
    Class09  --> C2 : Where am I?
    Class09  --* C3
    Class09  --|> Class07

    Class01 : size()
    Class01 : int chimp
    Class01 : int gorilla

    Class07 : equals()
    Class07 : Object[] elementData

    class Class10 {
        int id
        size()
    }

各种格式导出

Mermaid Live Editor 在线编辑工具中左侧Actions菜单进行导出

点击拷贝到粘贴板(Ctrl+V 直接用)
导出PNG
导出SVG
拷贝MARKDOWN

重要

你以为到此就结束了？看到代码似的是不是头疼？

不，高能的来了！直接让AI帮忙生成

二、使用AI快速生成图表

通过上面绘图工具需要熟悉语法过程，那么快速出片就需要用到chatGPT了，生成后甚至不需要修饰就可以直接粘贴使用。

如下图示例：GPT一秒钟就生成好流程图了，只要将流程图code复制到 Mermaid Live Editor 中，查看是否符合你的期望，修改也是即时预览的。

AI提示词：xxx图，用Mermaid格式输出展示

graph TD;

A[开始]-->B(用户打开App);

B --> C{是否已有账号};

C -->|是|D[显示登录界面];

C -->|否|E[显示注册界面];

E --> F{用户输入注册信息};

F --> G{信息是否完整};

G -->|是| H[验证信息格式];

H -->|格式正确| I[发送注册请求];

I --> J{是否注册成功};

J -->|成功| K[显示注册成功提示];

J -->|失败| L[显示注册失败提示];

K --> M[跳转到登录界面];

L --> E;

三、延展：Markdown标记语言 ⇆ Mindmaps脑图转换工具

推荐一款Typora Markdown 编辑器和阅读器，点击官网下载安装。

Typora 中编辑/预览Mermaid

打开软件偏好设置(ctrl+逗号)，勾选图表(序列图、流程图和Mermaid)
第1行 ```Mermaid（mermaid 记得用小写，博客有BUG无法用小写展示）

第6行 ``` 需手动输入，用于预览mermaid

```Mermaid
sequenceDiagram
    APP->>Web: 验证(用户名,密码)
    Web-->>APP: 返回结果，OK!
    APP-)Web: 登录访问
```

sequenceDiagram
    APP->>Web: 验证(用户名,密码)
    Web-->>APP: 返回结果，OK!
    APP-)Web: 登录访问

不同软件文档之间如何转换

用Typora编辑的文档文件 → 导出 → 选择OPML等格式导出后，导入至第三方软件Xmind或幕布中，即可转换成思维导图，进行二次编辑。
在线工具推荐
- 支持Mermaid导入\编辑的在线工具：ioDraw、VisionOn、FlowUs、印象笔记
- 在线转换工具(Markdown → mindmaps)：https://markmap.js.org/repl
- Pandoc万能语言在线转换工具：https://pandoc.org/try/

安装Pandoc插件

Pandoc是一个开源的文档转换工具，可以将各种标记语言的文档转换成其他格式，如HTML、PDF、Word等。它支持多种输入格式，包括Markdown、reStructuredText、LaTeX、ePub等，也支持多种输出格式，可以根据需要将文档转换成不同的格式。更多查看Pandoc官方文档

导出格式需要安装插件：Pandoc 一个文档转换器，点击官方下载安装。pandoc-3.1.11.1-windows-x86_64.msi
结合Typora软件使用

四、小科普

1.什么是Markdown？

Markdown是一种轻量级的标记语言，可用于将格式设置元素添加到纯文本文档中。Markdown 由John Gruber于2004年创建，如今已成为世界上最受欢迎的标记语言之一。文件后缀名为.md或.markdown。

它可以快速地转换成HTML等格式，用于编写文档、博客文章、笔记等。几乎你所见到的文档类工具都支持该格式，如飞书、语雀、Typora等

2.什么是OPML？

OPML的英文全拼是Outline Processor Markup Language，中文的意思是“大纲处理标记语言”，是建立在XML上的一种文件保存格式，主要用于描述一种结构化的、树形的文档结构。

常用工具，如 WorkFlowy、OmniOutliner等，可以导出OPML格式文件。您可以通过OPML文件，将这些工具编写的文档导入到Xmind、幕布。

3.什么是FreeMind？

FreeMind是一款跨平台、开源的思维导图软件，有很多年的历史，文件格式后缀为.mm，常见的思维导图工具，如XMind、MindManager、ProcessOn、傻度脑图等，都可以导出FreeMind格式的文件。可用此格式在各软件之间转换。