写点什么

B 格被拉满了....

用户头像
Jackpop
关注
发布于: 刚刚

程序员宝藏库:https://github.com/Jackpopc/CS-Books-Store


你最喜欢哪款流程图绘制工具?


draw.io、Visio、OmniGraffle 等等,不同的用户会有不同的选择。


那么,你是否想过利用一段 Python 代码绘制一幅流程图?


最近,我留意到 Github 上一个名为 Diagrams 的项目,可以用 Python 代码绘制云系统架构图。


它的诞生是为没有任何设计工具的新系统架构设计提供原型,可以绘制可视化系统架构。


Diagrams 目前主要的提供商包括 AWS,Azure,GCP,Kubernetes,阿里云,Oracle 云等。


图表使您可以用 Python 代码绘制云系统架构。它的诞生是为没有任何设计工具的新系统架构设计提供原型。您还可以描述或可视化现有的系统架构。图表目前支持主要的主要提供商,包括:AWS,Azure,GCP,Kubernetes,阿里云,Oracle 云等。它还支持本地节点,SaaS,以及其他的编程框架和语言。


今天,就来手把手教各位使用 Python 代码绘制一幅精美的流程图。

安装配置

环境配置


Diagrams 的使用需要 Python 版本在 3.6 以上,而且,需要事先安装 GraphViz,这主要用于绘制图表。然后,需要安装 Diagrams 工具包。


安装 GraphViz


在 Linux 下,可以使用包管理工具直接安装,以 Ubuntu 为例,


$ sudo apt install graphviz
复制代码


在 Fedora、Redhat、CentOS 下可以使用yum进行安装。


Windows 下可以使用 winget、choco 进行安装,以 winget 为例,


$ winget install graphviz
复制代码


在 Mac 系统下,可以使用 Homebrew 进行安装:


$ brew install graphviz
复制代码


安装 Diagrams


作为一款 Python 工具包,Diagrams 的安装相对简单很多,可以直接通过pippipenvpoetry这些包管理工具进行安装,


# using pip (pip3)$ pip install diagrams
# using pipenv$ pipenv install diagrams
# using poetry$ poetry add diagrams
复制代码


到此为止,就完成了 Diagrams 绘图环境的配置。

使用

组件类型


Diagrams 支持来自 AWS,Azure,GCP,Kubernetes,阿里云,Oracle 云不同提供商的图表图。


因此,可以使用来自 AWS,Azure,GCP,Kubernetes,阿里云,Oracle 云、k8s 等不同的组件类型。


绘图


要想绘制流程图,首先要抽象出一幅图表中的一些关键要素:


  • 图表—图表是表示图表的主要对象

  • 节点-代表单个系统组件的抽象概念

  • 群组-允许您将节点组织到组中,而不是孤立的组件中

  • 边—表示节点之间的连接


上述 4 点,就是绘制图表中关键的 4 个要素。在后续绘图过程中,就是把这几项要素组合在一起。


现在开始,你可以利用 Python 进行绘制图表了!


第一步:创建图表工作区


from diagrams import Diagram
with Diagram("Simple Website Diagram") as diag: passdiag
复制代码


这样,会创建一个带有指定标签的空白图,如下所示:



第二步:添加节点


现在我们有了工作区,现在该添加网站所需的节点了。


我们要添加的节点来自两个不同的提供程序, AWS 和 OnPrem 提供程序。


from diagrams import Diagram, Clusterfrom diagrams.aws.compute import EC2from diagrams.aws.network import ELBfrom diagrams.aws.network import Route53from diagrams.onprem.database import PostgreSQL # Would typically use RDS from aws.databasefrom diagrams.onprem.inmemory import Redis # Would typically use ElastiCache from aws.database
with Diagram("Simple Website Diagram") as diag: dns = Route53("dns") load_balancer = ELB("Load Balancer") database = PostgreSQL("User Database") cache = Redis("Cache") svc_group = [EC2("Webserver 1"), EC2("Webserver 2"), EC2("Webserver 3")]diag
复制代码


这时,你会看到,它不再是空白图表。


我们每个节点都被绘制出来了,这些就是我们要构建的体系结构的“要素”。


下一步将是将我们的某些节点组织为逻辑分组,然后将每个节点与边链接起来。



第三步:节点分组


在此示例中,我们将对负载平衡的 Web 服务器进行分组。


在下面您可以看到,要做到这一点,我们只需要将节点的实例移动到我们正在创建的集群范围内即可。


from diagrams import Diagram, Clusterfrom diagrams.aws.compute import EC2from diagrams.aws.network import ELBfrom diagrams.aws.network import Route53from diagrams.onprem.database import PostgreSQL # Would typically use RDS from aws.databasefrom diagrams.onprem.inmemory import Redis # Would typically use ElastiCache from aws.database
with Diagram("Simple Website Diagram") as diag: dns = Route53("dns") load_balancer = ELB("Load Balancer") database = PostgreSQL("User Database") cache = Redis("Cache") with Cluster("Webserver Cluster"): svc_group = [EC2("Webserver 1"), EC2("Webserver 2"), EC2("Webserver 3")]diag
复制代码


如你所见,该图仍然只是节点列表,但是现在我们将适当的节点聚类为逻辑分组。



第四步:连接节点


现在就到了最后一步,我们把孤立的节点连接到一起。


from diagrams import Diagram, Clusterfrom diagrams.aws.compute import EC2from diagrams.aws.network import ELBfrom diagrams.aws.network import Route53from diagrams.onprem.database import PostgreSQL # Would typically use RDS from aws.databasefrom diagrams.onprem.inmemory import Redis # Would typically use ElastiCache from aws.database
with Diagram("Simple Website Diagram", direction='LR') as diag: # It's LR by default, but you have a few options with the orientation dns = Route53("dns") load_balancer = ELB("Load Balancer") database = PostgreSQL("User Database") cache = Redis("Cache") with Cluster("Webserver Cluster"): svc_group = [EC2("Webserver 1"), EC2("Webserver 2"), EC2("Webserver 3")] dns >> load_balancer >> svc_group svc_group >> cache svc_group >> databasediag
复制代码


生成的图像可以在下面看到,现在你可以看到图中每个节点之间的逻辑流程。


可以通过更改定义节点的顺序来改变此流程。


除了调整流程外,你还可以更改许多内容,因为边对象包含三个属性:标签,颜色和样式。


针对这些细节,在这里不再赘述,感兴趣的同学可以访问文档进行详细了解。


结语

从前面结果可以看出,绘制的架构图是非常美观的,而且从实现逻辑来看,只需不到 20 行代码即可完成。实现方法非常简单,后期调整也非常轻松。


如果你对自动绘图感兴趣,不妨可以尝试一下。

发布于: 刚刚阅读数: 2
用户头像

Jackpop

关注

还未添加个人签名 2020.09.16 加入

公众号:平凡而诗意,微信:code_7steps,全网粉丝超20万,技术进阶、优质资源、实用工具,欢迎关注!

评论

发布
暂无评论
B格被拉满了....