Markdown 高阶语法

作者

AIGC可视化图表

传统图形绘制的缺点

流程图、思维导图、饼状图、柱状图等图形具有可视化的特性，能够帮助用户 激发思考、深化思维 。

以流程图为例，流程图是一种图形化展示流程、程序、系统或组织结构的工具，它能够帮助用户更好地理解和掌握复杂的流程和结构。对于项目管理人员、系统分析师、软件开发人员、产品经理、教育工作者等群体，他们都能通过流程图更好地组织和展示信息，以便更好地实现他们的工作目标。

然而， 传统图形绘制， 尤其是流程图存在包括绘制过程繁琐、不易维护、不直观、不易协作和不能自动化等问题。人们需要更加高效、直观、易于维护和协作的图形绘制工具。

如今，进入 AI 时代，基于 AI 的赋能，让上述问题有了全新的 解决方案 。

下面介绍AI + Mermaid*语法的图形绘制方法，适用于对于程序绘图几乎没有基础的小白，可以帮助他们快速绘制强大、好看的流程图、思维导图、饼状图、柱状图等常见图形。

注释：目前最强大的 AI 便是 GPT 模型. 因此，本文主要以 GPT 为例。你也可以使用其他 AI 模型进行替代。

解决思路

核心思路 ：

  • 以自然语言描述需求，让 AI 以流程图工具可以识别的 **PlantUML、Graphviz、Mermaid** 语法生成内容
  • 用 markdown编辑器 或者 画图工具 展现图形。

Markdown 支持大部分的高阶扩展库，推荐 markdown编辑器。
由于 Mermaid 语法的用户群体比较广泛。主要以 Mermaid 为例进行说明。

Markdown 高阶扩展库

  • mermaid
    mermaid 是比较流行的画图库，它支持流程图、顺序图和甘特图
  • echarts
    echarts是百度出品的 js 画图库，功能非常强大
  • PlantUML
    PlantUML是一款开源的UML图绘制工具，支持通过文本来生成图形，使用起来非常高效。可以支持时序图、类图、对象图、活动图、思维导图等图形的绘制。
  • LaTeX
    LaTeX是常用的论文排版工具，可以编写专业的数学公式，包括进入数学模式、基本表达、字母符号、矩阵与行列式。

Markdown高阶语法

graph TD
  A[在线 Markdown 编辑器]
  B[Arya编辑器]
  E[mermaid echarts LaTeX]
  C[Editor.md]
  D[Cmd编辑阅读器]
  F[PlantUML]
  A --> B
  A --> C
  A --> D
  B --> E
click B "https://markdown.lovejade.cn/" "Arya - 在线 Markdown 编辑器"
click C "https://pandao.github.io/editor.md/" "Editor.md"
click D "https://www.zybuluo.com/mdeditor" "Cmd Markdown 编辑阅读器"
click E "https://www.zengqueling.com/azxmbjq/" "显示图表格式"
click F "https://plantuml-editor.kkeisuke.com" "PlantUML"

1 显示图表 echarts格式

1.1 饼状图

一个班50人，女生20人，男生30人。请帮我制作一个圆环图，输出的echarts的 option对象配置代码

请输出使用严格的 JSON 格式，并去掉所有的注释。

【题外话】如输出的代码有错误，可以直接让chatgpt修复错误。

1.2 其他echarts图表

https://echarts.apache.org/examples/zh/index.html#chart-type-line

2 流程图：mermaid格式

流程图的类型很多。你可以根据需求，进行精准提问。

流程图类型 ：基础流程图、过程流程图、工作流程图、泳道流程图、数据流程图、类图、序列图、状态图、组件图、甘特图、实体关系图、对象图、部署图、用例图。

画图工具

AI 指令

  • 使用 mermaid.js 语法，生成{关于XX的图}
  • 复制 Code 中所生成的内容。

AI 指令模版：

使用 mermaid.js 语法，生成一个{描述内容}的{流程图}。

AI 指令范例：如下，我让 AI 提供几个范例。当然了，你可以提出具体要求。

使用 mermaid.js 语法，生成一个过程流程图示范。

选择导入 Mermaid

  • 新建空白页面/空白图册
  • 导入 ：点击 ➕，选择「程序作图」，再选择 Mermaid.

粘贴 Mermaid 语法内容，生成流程图

粘贴 Mermaid 语法的 Code 内容，选择 插入 ，随即可以生成可供使用的流程图。

使用效果

下面图形，均是 AI 辅助生成。

饼状图

甘特图

数据流程图

基础流程图

使用教程：动态 GIF 版

PlantUML流程图

请作为一个PlantUML流程图生成器，根据我的提示内容生成一个中国自媒体人员利用ChatGPT来创作微信公众号文案工作的流程图。
这个流程图需要包括自媒体人、ChatGPT，微信公众平台等角色扮演的活动步骤，流程开始于浏览ChatGPT网站，结束于能微信中发布。请确保输出的活动步骤不少于30个，输出PlantUML代码。

打开网站：
https://plantuml-editor.kkeisuke.com/

将生成的代码复制过去，点击生成即可。

@startuml
title 中国自媒体人员使用ChatGPT创作微信公众号文案流程图

|自媒体人|
start
:访问ChatGPT网站;
if (是否已有账号?) then (是)
:登录账号;
else (否)
:注册账号;
endif
:选择文案类型;
:输入关键词;
:设置文案主题;
:设置文案风格;
:设置文案长度;
:点击生成文案按钮;
|ChatGPT|
if (是否需要优化文案?) then (是)
:优化文案;
endif
:生成文案;
|自媒体人|
:查看生成的文案;
if (是否满意?) then (是)
:复制文案;
else (否)
:重新生成文案;
endif
:粘贴文案到微信编辑器;
|微信公众平台|
:编辑文案排版;
:添加图片或视频;
:设置阅读原文链接;
:设置发布时间;
:点击发布按钮;
stop
@enduml

生成的流程图可以按照PNG或者是SVG格式下载到本地.