只需 5 秒豆包轻松搞定：流程图、时序图、思维导图等 20 种常用图表，快来试试吧？

AI教程10小时前更新繁华落尽丶lee

641 0 0

大家好，我是向善。

向善本职工作程序员，在工作中经常用需要绘制各种图表。

工期紧张时，用绘图软件逐一手绘未免太过费时费力，有没有什么好的方法，可以解放劳动力，省出摸鱼时间呢？

作为 AI 博主，向善想是否可以借助 AI 画图？

说干就干，经过向善的尝试发现，豆包就可以画各种图表，不仅会画、操作简单、响应速度快，还能协助拓展思路，特好用。

今天，这篇文章分享了豆包支持的图表类型，进行实操演示，引入进阶解决方案，分享使用过程中遇到的问题。

1. 丰富的图表类型

支持的图表类型很多，听说过没听说过的都有。
如：流程图、时序图、类图、状态图、实体关系图、甘特图、饼图、象限图、需求图、Git图表、用户路程图、思维导图、XY图表、C4图、时间线图、ZenUML、快图、架构图、看板图、数据包图。

豆包实现图表绘制的过程也很简单，只需打开豆包官方网站：

https://www.doubao.com/chat/

然后输入以下提示词：

根据以下内容，基于 Mermaid 语法帮我生成 XX 图表。
内容如下：XXX

2. 实操演示

做开发时，经常会用到微信登录功能，这里我们以微信登录流程为例，使用豆包绘制时序图。

下面实操演示，一起来看看。

在豆包中输入如下提示词：

根据以下内容，基于 Mermaid 语法帮我生成时序图。
内容如下：
1.微信用户请求登录第三方应用，第三方应用向微信开发平台发送 OAuth2.0 授权登录。
2.微信开发平台，请求用户确认是否允许
3.微信用户允许授权后，微信开放平台会拉起应用或重定向到第三方，并且带上授权临时票据code参数；
4.第三方应用通过code参数加上AppID和AppSecret等，通过API换取access_token；
5. 通过access_token进行接口调用，获取用户基本数据资源或帮助用户实现基本操作。

演示界面如下：

只需 5 秒豆包轻松搞定：流程图、时序图、思维导图等 20 种常用图表，快来试试吧？

豆包输出 Mermaid 语法如下

sequenceDiagram
  participant User as 微信用户
  participant ThirdParty as 第三方应用
  participant WeChat as 微信开发平台
 
  User->>ThirdParty: 请求登录
  ThirdParty->>WeChat: OAuth2.0 授权登录请求
  WeChat->>User: 请求用户确认授权
  User->>WeChat: 允许授权
  WeChat->>ThirdParty: 重定向并携带授权码code
  ThirdParty->>WeChat: 使用code+AppID+AppSecret换取access_token
  WeChat->>ThirdParty: 返回access_token
  ThirdParty->>WeChat: 使用access_token调用用户数据接口
  WeChat->>ThirdParty: 返回用户基本数据

为啥只输出了Mermaid语法，没有画出来图形呢？经过尝试豆包暂不支持预览。

如何解决这个问题呢？可以使用Mermaid在线预览网站预览。https://mermaid.live/

将豆包输出的结果复制到Mermaid Live Editor工具中。

可以对图表进行修改和优化。

3. 进阶玩法

上面介绍的操作方法虽然实现了图表绘制，但是需要借助第三方网站预览，操作略显繁琐。如果只使用豆包是否可以实现？

你猜对了，当然可以，具体操作如下：

这次，使用豆包新上线的AI 编程应用创作功能，只需对上面的提示词进行简单调整。

提示词如下：

根据以下内容，基于 `Mermaid` 语法帮我生成时序图，以 HTML 格式展示。
内容如下：
1. 微信用户请求登录第三方应用，第三方应用向微信开发平台发送 OAuth2.0 授权登录。
2. 微信开发平台，请求用户确认是否允许
3. 微信用户允许授权后，微信开放平台会拉起应用或重定向到第三方，并且带上授权临时票据code参数；
4. 第三方应用通过code参数加上AppID和AppSecret等，通过API换取access_token；
5. 通过access_token进行接口调用，获取用户基本数据资源或帮助用户实现基本操作。

等待一会，奇迹发生了，豆包不仅帮我们绘制了时序图，还提供了详细的说明，以静态网页的形式提供出来。