尧图网页设计 
diagrams Custom 自定义节点指南用任意图片快速绘制自定义架构图【免费下载链接】diagrams:art: Diagram as Code for prototyping cloud system architectures项目地址: https://gitcode.com/GitHub_Trending/di/diagramsdiagrams 是一个「图即代码」Diagram as Code开源项目你用几行 Python 就能画出云架构图。它的图标库覆盖了 AWS、Azure、GCP、Kubernetes 等主流组件但总有一些自研中间件、内部系统找不到对应图标。Custom 自定义节点就是为此设计的传入一张本地图片或网络下载的图片它就能作为节点图标出现在你的架构图里最终由 Graphviz 渲染成 PNG/SVG 等格式。什么时候需要 Custom 自定义节点内置节点库再全也覆盖不了你的业务组件。想象一下这些场景你的公司有一套自研消息总线图标库里根本没有它某个开源工具比如某品牌的 Broker、网关有官方 logo但 diagrams 还没收录你给团队画内部服务拓扑需要把「任务调度中心」「报表服务」这类业务系统画进图里。这时你不需要等上游收录diagrams.custom.Custom类允许你把任意一张图片直接作为节点图标缺口立刻补上。它和内置节点一样继承自Node能参与所有连线操作符所以和现成节点混用时毫无违和感。五分钟画出第一张自定义架构图先备齐运行环境三样东西缺一不可Python 3.7 以上当前版本声明为 ^3.9系统级的 Graphviz 程序macOS 用 Homebrew、Windows 用 Chocolatey 均可库本体pip install diagrams。假设你把图标放在./icons/目录下写一个最小脚本first_diagram.pyfrom diagrams import Diagram from diagrams.custom import Custom with Diagram(内部消息链路, showFalse, filenamefirst_diagram): gateway Custom(API 网关, ./icons/gateway.png) consumer Custom(消费服务, ./icons/consumer.png) gateway consumerpython first_diagram.py之后当前目录会多出一张first_diagram.png。就这么简单你已经画出了第一张含自定义图标的架构图。三个值得留意的细节showFalse表示只存图、不弹窗预览适合脚本化产出filename不带扩展名默认输出 png也可以用outformat换成 svg、pdf 等节点创建在with Diagram(...)块内这个约束后面排查报错时还会用到。原理一句话Custom把图标路径原样写进 Graphviz 节点的image属性同时给节点加上shapenone让图标取代默认方框标签里每多一个换行\n节点高度自动加 0.4避免文字和图标叠在一起。真正的图片读取发生在with块退出、Graphviz 开始渲染的那一刻——所以图标只要在渲染前存在于磁盘上就行。图标从哪来本地图片路径直接传给 Custom这是最直接的用法。图标已经在你机器上设计同事给的 logo、自己画的 png把相对或绝对路径作为第二个参数传进去即可from diagrams import Diagram, Cluster from diagrams.custom import Custom with Diagram(数据平台依赖, showFalse, filenamelocal_icons, directionLR): scheduler Custom(任务调度\n中心, ./icons/scheduler.png) with Cluster(计算层): workers [Custom(Worker, ./icons/worker.png) - Custom(Worker, ./icons/worker.png) - Custom(Worker, ./icons/worker.png)] storage Custom(对象存储, ./icons/storage.png) scheduler workers workers storage为什么强调路径打个比方你把文件放哪Graphviz 就去哪找它不会替你改路径。Custom不做任何路径拼接所以相对路径是相对于「你运行脚本时所在的目录」而不是脚本文件所在位置。把脚本拷到别处执行、或者在错误目录下跑图标就会静默消失——这是新手踩坑最多的地方。注意上面还顺带用了两种组合技巧Cluster把三个 Worker 框成一个分组-表示无向边三者对等而是带箭头的有向边。网络图片如何下载图标后再引用如果图标托管在网站上思路是「先下载成本地文件再交给Custom」。Custom本身不发任何网络请求网络下载只是把图标本地化的手段from urllib.request import urlretrieve from diagrams import Diagram from diagrams.custom import Custom # 先下载图标渲染前文件必须就位 urlretrieve(https://example.com/icons/rabbitmq.png, rabbitmq.png) urlretrieve(https://example.com/icons/consumer.png, consumer.png) with Diagram(远程图标示例, showFalse, filenameremote_icon): broker Custom(消息 Broker, rabbitmq.png) worker Custom(消费 Worker, consumer.png) broker worker怎么做调用urlretrieve(url, 文件名)把远程图片保存到当前目录然后把本地文件名传给Custom。为什么必须这样Graphviz 渲染时只认磁盘上的文件image属性里写一个 http 地址它不会去下载。注意什么下载动作要发生在渲染之前——放在with块之前如示例或块内、节点创建之前都可以若脚本提前结束、文件还没落盘图里对应的图标就会是空白。官方文档中的远程图标示例渲染效果类似下面这张用远程下载的图标拼出的节点架构让图更复杂分组、扇出和混用画到一定规模光靠两个节点连线不够用了。三个进阶手段按使用频率排序。用 Cluster 给节点分组with Cluster(分组名):块内的所有节点会被框进一个带标题的圆角矩形视觉上表达这些属于同一层/同一域。上面的计算层就是例子。官方示例里也常用它把对等节点圈在一起列表扇出与聚合连线算子支持列表能一行替代 N 行重复代码a b有向边a 指向 ba - b无向边无箭头a [n1, n2, n3]右侧是列表 扇出a 分别指向每个节点[n1, n2, n3] b左侧是列表 聚合每个节点分别指向 b。前面scheduler workers一个调度器连三个 Worker和workers storage三个 Worker 汇聚到存储正好就是扇出 聚合的完整拓扑两个表达式搞定。与内置节点自由混用Custom继承自Node和Pod、Aurora等内置节点地位相同可以无缝串进同一条连线链。比如自定义消息队列 → 三个 K8s Workerfrom diagrams import Diagram, Cluster from diagrams.custom import Custom from diagrams.k8s.compute import Pod with Diagram(自定义与内置节点混用, showFalse, filenamemixed): with Cluster(消费集群): consumers [Pod(worker), Pod(worker), Pod(worker)] queue Custom(消息队列, rabbitmq.png) queue consumersqueue consumers一次扇出三条边整张图里自定义图标和 Kubernetes 官方图标同台出现。官方文档的同类示例Broker Pod 消费集群渲染效果如下常见报错与排查遇到下面几种情况基本都能快速定位图标不显示其他都正常90% 是路径问题。Custom相对路径基于脚本运行目录试试在图标所在目录执行脚本或改用绝对路径确认。文件在磁盘上但路径拼错了Graphviz 不报错只是不画。EnvironmentError: Global diagrams context not set up节点跑到了with Diagram(...)块外面。Custom和所有节点一样必须在全局图上下文内创建把节点创建语句挪回with块里即可。ValueError: xxx is not a valid directiondirection只接受TB/BT/LR/RL四种取值对应 Graphviz 的 rankdiroutformat同理只认png/jpg/svg/pdf/dot。渲染完找不到.dot中间文件这是预期行为。Diagram在with块退出时渲染完图后会主动删除 Graphviz 中间文件只留下最终图片方便你直接分发产物。参数速查参数所属默认值说明nameDiagram图标题未指定filename时用它生成文件名filenameDiagram由name生成输出文件名不带扩展名directionDiagramLR布局方向TB/BT/LR/RLshowDiagramTrue渲染后是否打开图像预览outformatDiagrampng输出格式可传列表一次出多格式labelCustom必填节点标签\n换行每换一行节点高度 0.4icon_pathCustom必填图片路径原样传给 Graphviz相对运行目录一句话总结Custom 自定义节点是 diagrams 扩展图标库的标准入口一张本地图片直接传路径一张网络图片先urlretrieve落盘再传文件名之后它就和内置节点一样能分组、扇出、聚合、连线。想动手试试从官方文档 docs/nodes/custom.md 开始实现源码在 diagrams/custom/init.py更完整的组合玩法可继续翻 docs/getting-started/examples.md。【免费下载链接】diagrams:art: Diagram as Code for prototyping cloud system architectures项目地址: https://gitcode.com/GitHub_Trending/di/diagrams创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 diagrams Custom 自定义节点指南：用任意图片快速绘制自定义架构图
diagrams Custom 自定义节点指南用任意图片快速绘制自定义架构图【免费下载链接】diagrams:art: Diagram as Code for prototyping cloud system architectures项目地址: https://gitcode.com/GitHub_Trending/di/diagramsdiagrams 是一个「图即代码」Diagram as Code开源项目你用几行 Python 就能画出云架构图。它的图标库覆盖了 AWS、Azure、GCP、Kubernetes 等主流组件但总有一些自研中间件、内部系统找不到对应图标。Custom 自定义节点就是为此设计的传入一张本地图片或网络下载的图片它就能作为节点图标出现在你的架构图里最终由 Graphviz 渲染成 PNG/SVG 等格式。什么时候需要 Custom 自定义节点内置节点库再全也覆盖不了你的业务组件。想象一下这些场景你的公司有一套自研消息总线图标库里根本没有它某个开源工具比如某品牌的 Broker、网关有官方 logo但 diagrams 还没收录你给团队画内部服务拓扑需要把「任务调度中心」「报表服务」这类业务系统画进图里。这时你不需要等上游收录diagrams.custom.Custom类允许你把任意一张图片直接作为节点图标缺口立刻补上。它和内置节点一样继承自Node能参与所有连线操作符所以和现成节点混用时毫无违和感。五分钟画出第一张自定义架构图先备齐运行环境三样东西缺一不可Python 3.7 以上当前版本声明为 ^3.9系统级的 Graphviz 程序macOS 用 Homebrew、Windows 用 Chocolatey 均可库本体pip install diagrams。假设你把图标放在./icons/目录下写一个最小脚本first_diagram.pyfrom diagrams import Diagram from diagrams.custom import Custom with Diagram(内部消息链路, showFalse, filenamefirst_diagram): gateway Custom(API 网关, ./icons/gateway.png) consumer Custom(消费服务, ./icons/consumer.png) gateway consumerpython first_diagram.py之后当前目录会多出一张first_diagram.png。就这么简单你已经画出了第一张含自定义图标的架构图。三个值得留意的细节showFalse表示只存图、不弹窗预览适合脚本化产出filename不带扩展名默认输出 png也可以用outformat换成 svg、pdf 等节点创建在with Diagram(...)块内这个约束后面排查报错时还会用到。原理一句话Custom把图标路径原样写进 Graphviz 节点的image属性同时给节点加上shapenone让图标取代默认方框标签里每多一个换行\n节点高度自动加 0.4避免文字和图标叠在一起。真正的图片读取发生在with块退出、Graphviz 开始渲染的那一刻——所以图标只要在渲染前存在于磁盘上就行。图标从哪来本地图片路径直接传给 Custom这是最直接的用法。图标已经在你机器上设计同事给的 logo、自己画的 png把相对或绝对路径作为第二个参数传进去即可from diagrams import Diagram, Cluster from diagrams.custom import Custom with Diagram(数据平台依赖, showFalse, filenamelocal_icons, directionLR): scheduler Custom(任务调度\n中心, ./icons/scheduler.png) with Cluster(计算层): workers [Custom(Worker, ./icons/worker.png) - Custom(Worker, ./icons/worker.png) - Custom(Worker, ./icons/worker.png)] storage Custom(对象存储, ./icons/storage.png) scheduler workers workers storage为什么强调路径打个比方你把文件放哪Graphviz 就去哪找它不会替你改路径。Custom不做任何路径拼接所以相对路径是相对于「你运行脚本时所在的目录」而不是脚本文件所在位置。把脚本拷到别处执行、或者在错误目录下跑图标就会静默消失——这是新手踩坑最多的地方。注意上面还顺带用了两种组合技巧Cluster把三个 Worker 框成一个分组-表示无向边三者对等而是带箭头的有向边。网络图片如何下载图标后再引用如果图标托管在网站上思路是「先下载成本地文件再交给Custom」。Custom本身不发任何网络请求网络下载只是把图标本地化的手段from urllib.request import urlretrieve from diagrams import Diagram from diagrams.custom import Custom # 先下载图标渲染前文件必须就位 urlretrieve(https://example.com/icons/rabbitmq.png, rabbitmq.png) urlretrieve(https://example.com/icons/consumer.png, consumer.png) with Diagram(远程图标示例, showFalse, filenameremote_icon): broker Custom(消息 Broker, rabbitmq.png) worker Custom(消费 Worker, consumer.png) broker worker怎么做调用urlretrieve(url, 文件名)把远程图片保存到当前目录然后把本地文件名传给Custom。为什么必须这样Graphviz 渲染时只认磁盘上的文件image属性里写一个 http 地址它不会去下载。注意什么下载动作要发生在渲染之前——放在with块之前如示例或块内、节点创建之前都可以若脚本提前结束、文件还没落盘图里对应的图标就会是空白。官方文档中的远程图标示例渲染效果类似下面这张用远程下载的图标拼出的节点架构让图更复杂分组、扇出和混用画到一定规模光靠两个节点连线不够用了。三个进阶手段按使用频率排序。用 Cluster 给节点分组with Cluster(分组名):块内的所有节点会被框进一个带标题的圆角矩形视觉上表达这些属于同一层/同一域。上面的计算层就是例子。官方示例里也常用它把对等节点圈在一起列表扇出与聚合连线算子支持列表能一行替代 N 行重复代码a b有向边a 指向 ba - b无向边无箭头a [n1, n2, n3]右侧是列表 扇出a 分别指向每个节点[n1, n2, n3] b左侧是列表 聚合每个节点分别指向 b。前面scheduler workers一个调度器连三个 Worker和workers storage三个 Worker 汇聚到存储正好就是扇出 聚合的完整拓扑两个表达式搞定。与内置节点自由混用Custom继承自Node和Pod、Aurora等内置节点地位相同可以无缝串进同一条连线链。比如自定义消息队列 → 三个 K8s Workerfrom diagrams import Diagram, Cluster from diagrams.custom import Custom from diagrams.k8s.compute import Pod with Diagram(自定义与内置节点混用, showFalse, filenamemixed): with Cluster(消费集群): consumers [Pod(worker), Pod(worker), Pod(worker)] queue Custom(消息队列, rabbitmq.png) queue consumersqueue consumers一次扇出三条边整张图里自定义图标和 Kubernetes 官方图标同台出现。官方文档的同类示例Broker Pod 消费集群渲染效果如下常见报错与排查遇到下面几种情况基本都能快速定位图标不显示其他都正常90% 是路径问题。Custom相对路径基于脚本运行目录试试在图标所在目录执行脚本或改用绝对路径确认。文件在磁盘上但路径拼错了Graphviz 不报错只是不画。EnvironmentError: Global diagrams context not set up节点跑到了with Diagram(...)块外面。Custom和所有节点一样必须在全局图上下文内创建把节点创建语句挪回with块里即可。ValueError: xxx is not a valid directiondirection只接受TB/BT/LR/RL四种取值对应 Graphviz 的 rankdiroutformat同理只认png/jpg/svg/pdf/dot。渲染完找不到.dot中间文件这是预期行为。Diagram在with块退出时渲染完图后会主动删除 Graphviz 中间文件只留下最终图片方便你直接分发产物。参数速查参数所属默认值说明nameDiagram图标题未指定filename时用它生成文件名filenameDiagram由name生成输出文件名不带扩展名directionDiagramLR布局方向TB/BT/LR/RLshowDiagramTrue渲染后是否打开图像预览outformatDiagrampng输出格式可传列表一次出多格式labelCustom必填节点标签\n换行每换一行节点高度 0.4icon_pathCustom必填图片路径原样传给 Graphviz相对运行目录一句话总结Custom 自定义节点是 diagrams 扩展图标库的标准入口一张本地图片直接传路径一张网络图片先urlretrieve落盘再传文件名之后它就和内置节点一样能分组、扇出、聚合、连线。想动手试试从官方文档 docs/nodes/custom.md 开始实现源码在 diagrams/custom/init.py更完整的组合玩法可继续翻 docs/getting-started/examples.md。【免费下载链接】diagrams:art: Diagram as Code for prototyping cloud system architectures项目地址: https://gitcode.com/GitHub_Trending/di/diagrams创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考