如何用 diagrams 的 c4 模块绘制 C4 软件架构图【免费下载链接】diagrams:art: Diagram as Code for prototyping cloud system architectures项目地址: https://gitcode.com/GitHub_Trending/di/diagramsdiagrams 是一个把云系统架构写成 Python 代码来渲染的 Diagram as Code 项目。除了 AWS、Azure 这类云厂商资源图标它的diagrams.c4模块专门提供了 C4 模型的绘图元素你可以用 Python 脚本描述人Person、容器Container、数据库Database、系统System以及它们之间的关系Relationship运行后得到一张可交付的软件架构图。本文以 C4 文档 中的 Internet Banking 容器图为主线给出从环境准备、编写脚本到验证产物的完整操作路径。适用前提Python 3.7 或更高版本并已安装 diagrams 依赖的 Graphviz 渲染引擎。准备环境安装文档 明确了两个前置条件Python 版本diagrams 要求 Python 3.7 或更高先确认本地 Python 版本。Graphvizdiagrams 使用 Graphviz 渲染图形必须先安装 Graphviz。文档给出的平台方式macOSHomebrewbrew install graphvizWindowsChocolateychoco install graphviz确认 Graphviz 可用后安装 diagrams任选一种方式# using pip (pip3) $ pip install diagrams # using pipenv $ pipenv install diagrams # using poetry $ poetry add diagramsc4 模块提供了哪些绘图元素diagrams.c4包导出的类分为节点和边两类定义见 diagrams/c4/init.py元素作用主要参数Person使用者name、description、external外部人员渲染为灰色Container容器Web 应用、API、移动端等name、technology、descriptionDatabase数据库图形为圆柱形shapecylinder标签位于下方name、technology、descriptionSystem系统name、description、external外部系统渲染为灰色SystemBoundary把多个节点框进一个虚线边界nameRelationship带文字标签的连接线默认虚线灰色styledashed、colorgray60label节点参数都是关键字参数。technology和description会显示在节点图形内部节点标签的副标题格式为类型: technologydescription 换行后展示在名称下方。两点渲染行为来自源码写长文案时需要注意节点 description 会被 diagrams/c4/init.py 中的_format_description折行最多 3 行超出部分丢弃并在末尾插入...边标签_format_edge_label同样最多 3 行。因此label和description写短句即可过长的文字不会被完整显示。编写一个可运行的 C4 图先用一个最小组合跑通流程。下面的脚本使用了Person、Container、Database、SystemBoundary、外部System和带标签的Relationship参考了 tests/test_c4.py 中的测试用法# c4_diagram.py from diagrams import Diagram from diagrams.c4 import Person, Container, Database, System, SystemBoundary, Relationship with Diagram(Banking System, directionTB): customer Person(Customer, descriptionA personal banking customer.) with SystemBoundary(Banking System): webapp Container(Web Application, technologyJava and Spring MVC, descriptionServes the single page application.) api Container(API Application, technologyJava and Spring MVC, descriptionProvides functionality via a JSON/HTTPS API.) database Database(Database, technologyOracle Database Schema, descriptionStores registration and transaction data.) email System(E-mail System, descriptionInternal e-mail system., externalTrue) customer Relationship(Visits banking using [HTTPS]) webapp webapp Relationship(Delivers SPA to the browser) api api Relationship(reads from and writes to) database api Relationship(Sends email using [SMTP]) email其中directionTB控制 Graphviz 布局方向graph_attr{splines: spline}这类字典参数可以透传给 GraphvizC4 文档示例中即用它让连线走曲线表示从左到右连接表示从右到左连接见 Nodes 文档 的 Data Flow 一节Relationship夹在两个节点之间提供标签SystemBoundary是一个上下文管理器框内定义的节点会被画进同一个虚线边界里。保存后执行$ python c4_diagram.py官方示例Internet Banking 容器图docs/nodes/c4.md 给出了一个完整的 Internet Banking 系统容器图示例展示了Person、多个Container、Database、两个外部System以及多条Relationship的组合写法包括一条节点对多个节点的连接 [spa, mobileapp]和一条反向连接customer Relationship(...) emailfrom diagrams import Diagram from diagrams.c4 import Person, Container, Database, System, SystemBoundary, Relationship graph_attr { splines: spline, } with Diagram(Container diagram for Internet Banking System, directionTB, graph_attrgraph_attr): customer Person( namePersonal Banking Customer, descriptionA customer of the bank, with personal bank accounts. ) with SystemBoundary(Internet Banking System): webapp Container( nameWeb Application, technologyJava and Spring MVC, descriptionDelivers the static content and the Internet banking single page application., ) spa Container( nameSingle-Page Application, technologyJavascript and Angular, descriptionProvides all of the Internet banking functionality to customers via their web browser., ) mobileapp Container( nameMobile App, technologyXamarin, descriptionProvides a limited subset of the Internet banking functionality to customers via their mobile device., ) api Container( nameAPI Application, technologyJava and Spring MVC, descriptionProvides Internet banking functionality via a JSON/HTTPS API., ) database Database( nameDatabase, technologyOracle Database Schema, descriptionStores user registration information, hashed authentication credentials, access logs, etc., ) email System(nameE-mail System, descriptionThe internal Microsoft Exchange e-mail system., externalTrue) mainframe System( nameMainframe Banking System, descriptionStores all of the core banking information about customers, accounts, transactions, etc., externalTrue, ) customer Relationship(Visits bigbank.com/ib using [HTTPS]) webapp customer Relationship(Views account balances, and makes payments using) [spa, mobileapp] webapp Relationship(Delivers to the customers web browser) spa spa Relationship(Make API calls to [JSON/HTTPS]) api mobileapp Relationship(Make API calls to [JSON/HTTPS]) api api Relationship(reads from and writes to) database api Relationship(Sends email using [SMTP]) email api Relationship(Makes API calls to [XML/HTTPS]) mainframe customer Relationship(Sends e-mails to) email示例中的名称、技术栈Java and Spring MVC、Xamarin 等均为文档示例值替换成你自己系统的实际信息即可。运行脚本后文档展示的生成结果如下文档示例结果验证运行python c4_diagram.py无报错在当前工作目录下生成一张 PNG 图片文件名由图表名Diagram第一个参数推导安装文档中的示例图表名为Web Service时产物保存在工作目录的web_service.png打开图片核对元素边界框SystemBoundary是否为虚线、Database是否为圆柱形、外部Person/System是否为灰色、关系线标签是否为虚线上的文字对照上面文档示例图的样式判断。如果运行时报找不到 Graphviz 可执行文件回到第一节确认 Graphviz 是否已安装并加入 PATH——这是安装文档明确列出的渲染依赖。限制与可继续深入的方向description 与关系标签均最多显示 3 行超出部分以...截断见 diagrams/c4/init.py长文案要提前压缩需要嵌套分组时SystemBoundary底层是Cluster支持嵌套写法可参考 Clusters 文档需要调整连线颜色、线型等 Graphviz 属性时可参考 Edges 文档 中Edge的label、color、style用法Relationship同样支持透传这些参数更多节点类型和各云厂商模块的用法见 Nodes 文档 与 Getting Started 示例。【免费下载链接】diagrams:art: Diagram as Code for prototyping cloud system architectures项目地址: https://gitcode.com/GitHub_Trending/di/diagrams创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 如何用 diagrams 的 c4 模块绘制 C4 软件架构图？
如何用 diagrams 的 c4 模块绘制 C4 软件架构图【免费下载链接】diagrams:art: Diagram as Code for prototyping cloud system architectures项目地址: https://gitcode.com/GitHub_Trending/di/diagramsdiagrams 是一个把云系统架构写成 Python 代码来渲染的 Diagram as Code 项目。除了 AWS、Azure 这类云厂商资源图标它的diagrams.c4模块专门提供了 C4 模型的绘图元素你可以用 Python 脚本描述人Person、容器Container、数据库Database、系统System以及它们之间的关系Relationship运行后得到一张可交付的软件架构图。本文以 C4 文档 中的 Internet Banking 容器图为主线给出从环境准备、编写脚本到验证产物的完整操作路径。适用前提Python 3.7 或更高版本并已安装 diagrams 依赖的 Graphviz 渲染引擎。准备环境安装文档 明确了两个前置条件Python 版本diagrams 要求 Python 3.7 或更高先确认本地 Python 版本。Graphvizdiagrams 使用 Graphviz 渲染图形必须先安装 Graphviz。文档给出的平台方式macOSHomebrewbrew install graphvizWindowsChocolateychoco install graphviz确认 Graphviz 可用后安装 diagrams任选一种方式# using pip (pip3) $ pip install diagrams # using pipenv $ pipenv install diagrams # using poetry $ poetry add diagramsc4 模块提供了哪些绘图元素diagrams.c4包导出的类分为节点和边两类定义见 diagrams/c4/init.py元素作用主要参数Person使用者name、description、external外部人员渲染为灰色Container容器Web 应用、API、移动端等name、technology、descriptionDatabase数据库图形为圆柱形shapecylinder标签位于下方name、technology、descriptionSystem系统name、description、external外部系统渲染为灰色SystemBoundary把多个节点框进一个虚线边界nameRelationship带文字标签的连接线默认虚线灰色styledashed、colorgray60label节点参数都是关键字参数。technology和description会显示在节点图形内部节点标签的副标题格式为类型: technologydescription 换行后展示在名称下方。两点渲染行为来自源码写长文案时需要注意节点 description 会被 diagrams/c4/init.py 中的_format_description折行最多 3 行超出部分丢弃并在末尾插入...边标签_format_edge_label同样最多 3 行。因此label和description写短句即可过长的文字不会被完整显示。编写一个可运行的 C4 图先用一个最小组合跑通流程。下面的脚本使用了Person、Container、Database、SystemBoundary、外部System和带标签的Relationship参考了 tests/test_c4.py 中的测试用法# c4_diagram.py from diagrams import Diagram from diagrams.c4 import Person, Container, Database, System, SystemBoundary, Relationship with Diagram(Banking System, directionTB): customer Person(Customer, descriptionA personal banking customer.) with SystemBoundary(Banking System): webapp Container(Web Application, technologyJava and Spring MVC, descriptionServes the single page application.) api Container(API Application, technologyJava and Spring MVC, descriptionProvides functionality via a JSON/HTTPS API.) database Database(Database, technologyOracle Database Schema, descriptionStores registration and transaction data.) email System(E-mail System, descriptionInternal e-mail system., externalTrue) customer Relationship(Visits banking using [HTTPS]) webapp webapp Relationship(Delivers SPA to the browser) api api Relationship(reads from and writes to) database api Relationship(Sends email using [SMTP]) email其中directionTB控制 Graphviz 布局方向graph_attr{splines: spline}这类字典参数可以透传给 GraphvizC4 文档示例中即用它让连线走曲线表示从左到右连接表示从右到左连接见 Nodes 文档 的 Data Flow 一节Relationship夹在两个节点之间提供标签SystemBoundary是一个上下文管理器框内定义的节点会被画进同一个虚线边界里。保存后执行$ python c4_diagram.py官方示例Internet Banking 容器图docs/nodes/c4.md 给出了一个完整的 Internet Banking 系统容器图示例展示了Person、多个Container、Database、两个外部System以及多条Relationship的组合写法包括一条节点对多个节点的连接 [spa, mobileapp]和一条反向连接customer Relationship(...) emailfrom diagrams import Diagram from diagrams.c4 import Person, Container, Database, System, SystemBoundary, Relationship graph_attr { splines: spline, } with Diagram(Container diagram for Internet Banking System, directionTB, graph_attrgraph_attr): customer Person( namePersonal Banking Customer, descriptionA customer of the bank, with personal bank accounts. ) with SystemBoundary(Internet Banking System): webapp Container( nameWeb Application, technologyJava and Spring MVC, descriptionDelivers the static content and the Internet banking single page application., ) spa Container( nameSingle-Page Application, technologyJavascript and Angular, descriptionProvides all of the Internet banking functionality to customers via their web browser., ) mobileapp Container( nameMobile App, technologyXamarin, descriptionProvides a limited subset of the Internet banking functionality to customers via their mobile device., ) api Container( nameAPI Application, technologyJava and Spring MVC, descriptionProvides Internet banking functionality via a JSON/HTTPS API., ) database Database( nameDatabase, technologyOracle Database Schema, descriptionStores user registration information, hashed authentication credentials, access logs, etc., ) email System(nameE-mail System, descriptionThe internal Microsoft Exchange e-mail system., externalTrue) mainframe System( nameMainframe Banking System, descriptionStores all of the core banking information about customers, accounts, transactions, etc., externalTrue, ) customer Relationship(Visits bigbank.com/ib using [HTTPS]) webapp customer Relationship(Views account balances, and makes payments using) [spa, mobileapp] webapp Relationship(Delivers to the customers web browser) spa spa Relationship(Make API calls to [JSON/HTTPS]) api mobileapp Relationship(Make API calls to [JSON/HTTPS]) api api Relationship(reads from and writes to) database api Relationship(Sends email using [SMTP]) email api Relationship(Makes API calls to [XML/HTTPS]) mainframe customer Relationship(Sends e-mails to) email示例中的名称、技术栈Java and Spring MVC、Xamarin 等均为文档示例值替换成你自己系统的实际信息即可。运行脚本后文档展示的生成结果如下文档示例结果验证运行python c4_diagram.py无报错在当前工作目录下生成一张 PNG 图片文件名由图表名Diagram第一个参数推导安装文档中的示例图表名为Web Service时产物保存在工作目录的web_service.png打开图片核对元素边界框SystemBoundary是否为虚线、Database是否为圆柱形、外部Person/System是否为灰色、关系线标签是否为虚线上的文字对照上面文档示例图的样式判断。如果运行时报找不到 Graphviz 可执行文件回到第一节确认 Graphviz 是否已安装并加入 PATH——这是安装文档明确列出的渲染依赖。限制与可继续深入的方向description 与关系标签均最多显示 3 行超出部分以...截断见 diagrams/c4/init.py长文案要提前压缩需要嵌套分组时SystemBoundary底层是Cluster支持嵌套写法可参考 Clusters 文档需要调整连线颜色、线型等 Graphviz 属性时可参考 Edges 文档 中Edge的label、color、style用法Relationship同样支持透传这些参数更多节点类型和各云厂商模块的用法见 Nodes 文档 与 Getting Started 示例。【免费下载链接】diagrams:art: Diagram as Code for prototyping cloud system architectures项目地址: https://gitcode.com/GitHub_Trending/di/diagrams创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考