D2 简洁而强大的脚本流程图工具

推荐一款好用的脚本流程图工具 D 2，个人觉得比语法比 Mermaid 更简单易上手。

什么是 D 2？

D 2是一种用于绘制图表和流程图的声明式语言，由 Terrastruct 开发并维护。它的设计理念是让用户能够以直观的方式描述图形结构，同时保持代码的简洁性和可读性。通过使用简单的文本指令，用户可以快速构建出专业的图表，并且这些图表可以在多种环境中运行，包括 Obsidian 和 VSCode 等流行的编辑器插件。

核心特点

  • 简洁的语法：D 2 的语法非常简单，几乎任何人都能迅速学会如何用它来创建图表。
  • 丰富的元素支持：除了基本的节点和边之外，D 2 还提供了诸如分组、样式定制、位置控制等功能，允许用户创建更加复杂的图形。
  • 跨平台兼容性：D 2 可以与多个平台集成，如 Obsidian、VSCode 等，方便不同场景下的使用。

基础语法

形状 ( Shapes)

1
2
3
4
5
6
pg: PostgreSQL
pg.shape: cloud
Cloud: my cloud
Cloud.shape: cloud
SQLite
Cassandra

image.png

连接 ( Connections)

连接定义形状之间的关系。有 4 种方式：

  • --
  • ->
  • <-
  • <->
1
A -> B

这条语句会在 A 和 B 之间画一条箭头指向的线段。

标签 (Label)

给边添加标签可以帮助解释它们之间的关系。例如：

1
A -> B: "some label"

这将在 A 到 B 的边上显示文本 “some label”。

箭头方向 ( Direction)

设置为 direction 确定方向。Up、down、right、left

1
2
direction: right
x -> y -> z: hello

注释 (Comment)

在编写较长或复杂的 D 2 文件时，注释有助于提高代码的可读性。单行注释以 # 开始：

1
2
# This is a comment
a

image.png

高级特性

除了上述基础元素外，D 2 还具备许多高级特性，如样式设置、位置调整、属性定义等，可以让用户根据自己的需求灵活地定制图表。

样式 (Style)

应用样式可以使图表更具视觉吸引力。例如：

1
2
3
4
5
6
7
direction: right
x -> y: hi
y -> z
x.style.fill: "#f4a261"
y.style.fill: honeydew
z.style.fill: "linear-gradient(#f69d3c, #3f87a6)"

image.png

位置 (Positioning)

为图表指定标题并设置位置，位置参数包括：top-left, top-center, top-right,center-left, center-right,bottom-left, bottom-center, bottom-right

1
2
3
4
5
6
title: |md
  # A winning strategy
| {near: top-center}
poll the people -> results
results -> unfavorable -> poll the people
results -> favorable -> will of the people

变量 (Variables)

Vars 是一个用于定义变量的特殊关键字。这些变量可以使用替换语法引用： ${} .

1
2
3
4
5
6
7
8
9
10
direction: right
vars: {
  server-name: Cat
}

server1: ${server-name}-1
server2: ${server-name}-2

server1 <-> server2

特殊元素

D 2 还支持一些特殊元素，如标题、形状、颜色、图标和链接，使图表更加丰富多样。

标题 (Title)

为整个图表添加一个醒目的标题。例如：

1
2
3
4
5
6
title: "Chart Title" {
  style: {
    font-size: 30
    bold: true
  }
}

形状 (Shape)

改变节点的默认矩形形状。例如：

1
2
A: "Circle Node" { shape: circle }
B: "Diamond Node" { shape: diamond }

图标 (Icon)

在节点中加入图标可以增加图形的表现力。例如：

1
2
3
my network: {
  icon: https://icons.terrastruct.com/infra/019-network.svg
}

image.png

让某些节点成为可点击的超链接。例如：

1
A: "Clickable Node" { link: "https://example.com" }

应用实例

接下来，我们来看几个实际应用中的例子，展示 D 2 如何帮助我们解决现实问题。

AWS 服务架构

1
2
3
4
aws_s3:    AWS S3 California{
  Monitoring ---------->California
}
aws_s3 -> y

image.png

如何开始使用 D 2？

要开始使用 D 2，您首先需要下载并安装 D 2 应用程序。可以从 D2 官网 或者 GitHub 发布页面 获取最新版本。安装完成后，您可以直接在命令行中运行 D 2，或者通过集成开发环境（IDE）插件来使用它。

对于喜欢笔记应用的人来说，D 2 也可以作为 Obsidian 的插件来使用。只需前往 Obsidian 插件仓库，按照说明进行安装即可。此外，如果您经常使用 Visual Studio Code，那么也可以通过应用商店 安装 D 2 插件，在 Markdown 文件中直接嵌入 D 2 代码块。

结论

D 2 提供了一种高效且优雅的方式来创建图表和流程图，无论您是技术专家还是普通用户，都能从中受益。其简洁的语法、强大的功能以及良好的社区支持，使得 D 2 成为了可视化表达的理想选择。希望这篇文章能让更多的人了解 D 2，并激发他们在工作中尝试这一强大工具的兴趣。

以上就是关于 D 2 的介绍，希望能为您的图表绘制之旅带来灵感。如果您有任何疑问或建议，请随时留言交流！

参考资料

  1. D 2 官网 https://d2lang.com/
  2. D 2 体验 https://play.d2lang.com/
  3. D 2 obsidian 插件 https://github.com/terrastruct/d2-obsidian?tab=readme-ov-file
  4. D 2 应用下载 https://github.com/terrastruct/d2/releases/tag/v0.6.8

BY

纯个人经验，如有帮助，请收藏点赞，如需转载，请注明出处。
微信公众号：环境猫 er
CSDN : 细节处有神明
个人博客： https://maoyu92.github.io/

工具推荐
#d2 #学习记录 #工具推荐 #流程图
D2 简洁而强大的脚本流程图工具
https://maoyu92.github.io/2025/01/02/03 工具推荐/D 2：一种简洁而强大的脚本图标和流程图工具/
作者
陈文茂
发布于
2025年1月2日
许可协议