轻松实现图表的版本控制：VSCode + Draw.io Integration + Git

原理

1. 版本控制通过 git 实现
2. 图表绘制通过 VSCode 中嵌入 draw.io 绘制工具实现

准备工作

1. 安装好 Visual Studio Code (VSCode)
2. VSCode 中安装 Draw.io Integration 插件（可在 VSCode 的插件商店中安装）
   • 
3. 创建 Git repo

创建和编辑图表

1. 在 VSCode 中创建 .drawio 文件:

   • 在 VSCode 中创建一个新文件，确保文件后缀为 .drawio。
   • 打开这个文件，就可以编辑和预览 Draw.io 图表，示例如下：

2. 编辑图表内容:

   • 使用 Draw.io 的工具栏可以添加各种形状、连接线和文本绘制想要的图表
   • 可以点击左下角【+More Shapes】按钮添加更多图形，示例如下：

3. 调整样式: 可以根据需要调整图表的样式，如颜色、字体、线条样式等，以使其更具可读性和吸引力。

4. 保存和提交更改: 可以借助 Git 工具，将代码提交到本地或者远程仓库里，这样主要有两个好处

   • 进行版本控制
   • 如果上传到远程仓库，更有利于团队协作

一个简单的流程图示例

这样看着可能有些单调，可以根据流程中步骤的类型填充不同的颜色，或者进行别的样式调整，如下图

有一个特别的功能，可将绘制的标准的图形一键替换为 草稿 样式，有的人可能觉得这样更好看一些

1. 点击画布区空白区域，进入到全局设置
2. 然后按照图示可以切换为 草稿 模式

当然也可以直接从 Misc 中添加这种类似于手绘的图形

可绘制的图表类型

可以绘制的类型很多，可以通过官网模板中可以看到有很多图表类型

下面举几个常见的图表例子

流程图

UML 类图

时序图

泳道图

架构图

原型图

美中不足

这种方式好处非常多，使用下来唯一不能满足我绘图要求的一点是：不能绘制思维导图。