Diagram as Code -- 用 Python 画框架图

最近注意到一个很有意思的项目 Diagrams, 用 Python 代码来绘制架构或流程图, 以前基本用 Gliffy 来画。继一系列 X as X, 如 PaaS, SaaS, IaaS, CaC(Configuration as Code), IaC(Infrastructure as Code) 等，Diagrams 喊出了 Diagram as Code 的口号。其实，在这之前, Markdown 就做了许多 Diagram as Code 的事情，也许更准确说是 Diagram as Document。

熟练的程序员大概不喜欢用可视化设计器来生成 GUI 代码，那会让代码变得极不简洁，而是直接写，眼中看到的是代码，头脑中即时产生映像。

Diagrams 就是这样一款写 Python 代码产生架构或流程图的库，它绘制的架构图支持主要的云服务提供商，如

1. 知名的(本人认为的): AWS, Azure, GCP, IBM, DigitalOcean, AlibabaCloud, OCI(Oracle Cloud Infrastructure, 不是 Open Container Initiative), OpenStack
2. 刚了解到的: Google 的 Firebase, Elastic(ElasticSearch 出品方也有自己的平台), Outscale
3. 以及应用平台 K8S, Saas 和 OnPrem 中的元素
4. 通用元素，编程语言及流程图，还能定制自己的节点图

Diagrams 的安装需求

1. Python 3.6 或以上
2. 用 Graphviz 渲染图，根据平台用不同的安装命令 brew install graphviz 或 choco install graphviz 等
3. 安装本尊: pip install diagrams，注意不是 diagram

立即体验

不用官方 Quick Start 的例子，直接上一个稍显复杂点的。创建 diagram.py 文件, 代码为

留意组件分组用 Cluster, 组件之间依赖关系的运算符 >>, 这与 Apache Airflow 表示任务之间的依赖是类似的。

执行 python diagram.py, 它会在当前目录中产生图片文件 clustered_web_services.png 并会在系统当前的看图软件中打开预览。

图片文件名的规则是由 Diagram 的第一个 name 参数转换的，或者可它的 filename 参数指定文件名; 默认的 show 参数是 True，即执行后会立即打开生成的图片，设置为 False 的话只会在当前目录中生成图片文件。

其他的 Diagram 生成图片的定制功能, 如字体, 背景颜色, 线条等就参考官方文档或看 API 及源代码。更多例子请参考官方的 Diagrams Examples。

Jupyter Notebook 中使用 Diagrams

Diagram 除了在本地生成图片文件，在 Jupyter Notebook(或 JupyterLab) 中使用它的话，由于是在 Web UI 中，所以能直接在当前浏览器中显示生成的图片文件

注意用 with Diagram(...) as diag 的方式，最后记得用 diag 才是在 Jupyter Notebook 中显示相应的图片

Diagram 总是会在磁盘上先产生一个图片文件

如果把 Diagram 的 show 赋值为 True, 除了在 JupyterLab 中显示图片外，还会用系统当前的图片浏览程序打开的图片。

后话

对 Diagrams 的粗略了解也差不多了，更多内容请随时关注它的 Diagrams 官网。

前面提到 Markdown 中也能画复杂的流程图，以及高级的数学公式。关于 Markdown 相关的图形组件可以看这里 https://gist.github.com/blackcater/1701e845a963216541591106c1bb9d3b. 其中列出如下 Markdown 应用

1. flowchart.js,
2. js-sequence-diagrams
3.  mermaid
4. PlantUML
5. WaveDrom
6. 使用到了 GraphViz 的 Viz.js
7. vega 和 vega-lite
8. ditaa

其中的 js-sequence-diagrams 产生的手绘风格图是我曾经寻找很久想要的

又找到几个画手绘风格图的项目 Excalidraw, Rough.js,