Skip to content

搞英语 → 看世界

翻译英文优质信息和名人推特

Menu
  • 首页
  • 作者列表
  • 独立博客
  • 专业媒体
  • 名人推特
  • 邮件列表
  • 关于本站
Menu

将代码转换成精美图表的 6 大工具

Posted on 2025-08-19

为什么要将代码转换成图表

好的图表能够将复杂的概念压缩成形状、箭头和框架,就像代码压缩逻辑一样。当图表由代码生成时,它们可以进行版本控制、审核并与系统保持同步。本文比较了六种常用的图表方案,并展示了一些简单的示例,以便您根据团队和工作流程选择合适的工具。

如何选择

考虑三件事:图表将存放在哪里、更改频率以及谁必须编辑它。如果您希望将图表嵌入文档和 PR,像 Mermaid 或 PlantUML 这样的文本优先格式是不错的选择。如果您更喜欢源自真实代码的图表,Diagrams (Python) 或 Go Diagrams 可以与您的语言工具链集成。对于快速草图,ASCII 格式毫无阻力。对于头脑风暴和笔记记录,Markmap 可以将 Markdown 转换为交互式思维导图。

图表(Python)

Diagrams 是一个 Python 库,用于通过代码渲染架构图。它擅长处理需要提供提供商图标、集群和一致样式的云/系统架构。由于它是 Python 语言,您可以编写生成器、复用组件,并测试生成架构图的代码。

 # pip install diagrams from diagrams import Diagram, Cluster from diagrams.aws.compute import EC2 from diagrams.aws.database import RDS from diagrams.aws.network import ELB with Diagram( "web-service" , show= False ): with Cluster( "App Tier" ): app = [EC2( "app1" ), EC2( "app2" )] db = RDS( "primary-db" ) lb = ELB( "edge" ) lb >> app >> db当您需要可重复的、带有云图标的代码审查架构图并且 Python 已经在您的堆栈中时使用它。 # pip install diagrams from diagrams import Diagram, Cluster from diagrams.aws.compute import EC2 from diagrams.aws.database import RDS from diagrams.aws.network import ELB with Diagram( "web-service" , show= False ): with Cluster( "App Tier" ): app = [EC2( "app1" ), EC2( "app2" )] db = RDS( "primary-db" ) lb = ELB( "edge" ) lb >> app >> db

Go 图表

Go Diagrams 遵循了 Go 生态系统的类似理念。它允许你用 Go 定义节点和边,然后渲染为 SVG/PNG。它的优势在于类型安全、组合简单,并且非常适合那些倾向于使用单一语言的 Go 服务开发者。

 package main func main () { // Pseudocode-style example to convey intent g := NewDiagram( "payments" ) api := g.Node( "API" ) svc := g.Node( "Service" ) db := g.Node( "DB" ) api.Connect(svc) svc.Connect(db) g.Render( "payments.svg" ) }如果您的团队编写 Go 并希望在同一个工具链中生成图表,以获得 CI 友好的输出和代码审查,请选择它。 package main func main () { // Pseudocode-style example to convey intent g := NewDiagram( "payments" ) api := g.Node( "API" ) svc := g.Node( "Service" ) db := g.Node( "DB" ) api.Connect(svc) svc.Connect(db) g.Render( "payments.svg" ) }

美人鱼

Mermaid 使用简洁的 Markdown 式语法渲染图表,并支持多种平台(包括 GitHub、GitLab 和众多文档工具)。对于以文档为导向的团队来说,Mermaid 是理想之选,因为图表与文本并存,并且可以通过简单的编辑进行更新。

 flowchart TD A [Client] --> B [API Gateway] B --> C{Auth?} C -- yes --> D [Service] C -- no --> E [401] D --> F [(DB)]直接在 Markdown 文件、wiki 和 PR 描述中使用 Mermaid 绘制架构草图、流程和序列图。 flowchart TD A [Client] --> B [API Gateway] B --> C{Auth?} C -- yes --> D [Service] C -- no --> E [401] D --> F [(DB)]

PlantUML

PlantUML 是一个成熟的基于文本的系统,支持多种图表类型:序列图、组件图、类图、状态图等等。它为大型文档代码库提供了强大的样式、包含项和外观参数功能。

 @startuml actor User participant "Web App" as Web database DB User -> Web : POST /login Web -> DB : query credentials DB --> Web : result Web --> User : 200 OK @enduml当您需要广泛的图表类型、细粒度的样式以及涵盖大型文档集的模块化内容时,请选择 PlantUML。 @startuml actor User participant "Web App" as Web database DB User -> Web : POST /login Web -> DB : query credentials DB --> Web : result Web --> User : 200 OK @enduml

ASCII 图表

ASCII 图表是纯文本绘图,您可以在任何编辑器中创建并保存在代码块中。它们可以在任何地方渲染,清晰地进行 diff 处理,并且无需任何工具链。它们非常适合用于快速设计笔记、README 代码片段以及终端优先的工作流程。

 +---------+ +----------+ +--------+ | Client | ---> | Proxy | ---> | API | +---------+ +----------+ +--------+ |                 | vv Cache Database当您重视速度、通用性和零依赖性而非完善性时,请选择 ASCII。 +---------+ +----------+ +--------+ | Client | ---> | Proxy | ---> | API | +---------+ +----------+ +--------+ |                 | vv Cache Database

标记图

Markmap 将 Markdown 列表转换为交互式思维导图。它非常适合头脑风暴、笔记记录和结构化研究。由于其源文件是 Markdown,因此它可以与现有文档和知识库完美兼容。

 # Project Kickoff - Scope - MVP - Out of scope - Architecture - Services - Data flow - Risks - Scaling - Compliance使用 Markmap 在早期阶段构思和呈现层次结构,然后将这些注释发展为正式文档。 # Project Kickoff - Scope - MVP - Out of scope - Architecture - Services - Data flow - Risks - Scaling - Compliance

何时使用哪个

如果您想要代码原生、图标丰富的架构图,并与云资源保持同步,请根据您的语言选择 Diagrams (Python) 或 Go Diagrams。如果您需要在文档和 PR 中使用流畅的图表,并支持广泛的平台,请选择 Mermaid。如果您需要高级图表类型、皮肤和模块化,请选择 PlantUML。想要快速、无依赖的草图,请使用 ASCII。对于早期构思和基于笔记的演示文稿,请使用 Markmap。

工作流程提示

将图表源与其描述的系统保存在同一个代码库中,以便代码变更能够同步进行。添加 CI 步骤来渲染和验证图表,以防止代码漂移。为常见拓扑创建可重用的模板,并强制执行命名和样式约定。对于混合环境,文档应采用文本优先格式(例如 Mermaid 或 PlantUML),并使用语言原生生成器(例如 Diagrams 或 Go Diagrams)进行补充,以实现受益于代码重用的架构。

总结

将图表视为动态的产物,而非静态的图像。当它们由代码或文本生成时,它们将变得易于审查、测试和改进。为您的团队选择一种主要格式,只有在能够明显减少摩擦或提高清晰度时才添加其他格式。

原文: https://atlassc.net/2025/08/19/top-6-tools-to-turn-code-into-beautiful-diagrams

本站文章系自动翻译,站长会周期检查,如果有不当内容,请点此留言,非常感谢。
  • Abhinav
  • Abigail Pain
  • Adam Fortuna
  • Alberto Gallego
  • Alex Wlchan
  • Answer.AI
  • Arne Bahlo
  • Ben Carlson
  • Ben Kuhn
  • Bert Hubert
  • Big Technology
  • Bits about Money
  • Brian Krebs
  • ByteByteGo
  • Chip Huyen
  • Chips and Cheese
  • Christopher Butler
  • Colin Percival
  • Cool Infographics
  • Dan Sinker
  • David Walsh
  • Dmitry Dolzhenko
  • Dustin Curtis
  • eighty twenty
  • Elad Gil
  • Ellie Huxtable
  • Ethan Dalool
  • Ethan Marcotte
  • Exponential View
  • FAIL Blog
  • Founder Weekly
  • Geoffrey Huntley
  • Geoffrey Litt
  • Greg Mankiw
  • HeardThat Blog
  • Henrique Dias
  • Herman Martinus
  • Hypercritical
  • IEEE Spectrum
  • Investment Talk
  • Jaz
  • Jeff Geerling
  • Jonas Hietala
  • Josh Comeau
  • Lenny Rachitsky
  • Li Haoyi
  • Liz Danzico
  • Lou Plummer
  • Luke Wroblewski
  • Maggie Appleton
  • Matt Baer
  • Matt Stoller
  • Matthias Endler
  • Mert Bulan
  • Mind Matters
  • Mostly metrics
  • Naval Ravikant
  • News Letter
  • NextDraft
  • Non_Interactive
  • Not Boring
  • One Useful Thing
  • Phil Eaton
  • Product Market Fit
  • Readwise
  • ReedyBear
  • Robert Heaton
  • Rohit Patel
  • Ruben Schade
  • Sage Economics
  • Sam Altman
  • Sam Rose
  • selfh.st
  • Shtetl-Optimized
  • Simon schreibt
  • Slashdot
  • Small Good Things
  • Steph Ango
  • Stephen Wolfram
  • Steve Blank
  • Taylor Troesh
  • Telegram Blog
  • The Macro Compass
  • The Pomp Letter
  • thesephist
  • Thinking Deep & Wide
  • Tim Kellogg
  • Understanding AI
  • Wes Kao
  • 英文媒体
  • 英文推特
  • 英文独立博客
©2025 搞英语 → 看世界 | Design: Newspaperly WordPress Theme