公众号关注 「奇妙的 Linux 世界」

设为「星标」,每天带你玩转 Linux !

D2 是一种声明式流程图的领域特定语言 (DSL),声明式只需要描述你想要的流程图即可,它就会自动生成对应的图像。

例如,在左侧提供如下所示的输入,然后在右侧我们就可以得到对应的输出流程图。

流程图开发工具

D2 的设计目标只有一个:把流程图变成工程师的愉快体验,很多工具对简单的图表可以做到这一点,但是当你接触到稍微复杂的流程图的时候就非常困难了。

这是因为今天的大多数流程图工具都是设计工具,而不是开发工具,他们给你一个空白的画布和一个可以拖放的工具栏,类似于 Figma 或者 Photoshop 那样,并且把他们的预期工作流程视为设计过程,但是工程师并不是视觉设计师,缺乏对系统进行空间架构的能力不应该阻碍有价值文档的创建,每一次拖放都不应该需要计划,声明式的流程图就可以消除这种困难点。

设计决策

以下是指导 D2 开发的设计决策,我们尽力避免过去的错误,并从成功的现代编程和配置语言中获取灵感。

设计决策本质上意味着权衡,你可能不同意其中的一些决定。但是,如果你是一名程序员,那么 D2 就是为你打造的,而且我们相信你会发现这些决定是一种让你感到自在的语言。

可读性 > 原型速度

可读性和原型制作速度都很重要,D2 通常更倾向于可读性。D2 的语法很轻巧,希望你能按顺序在易用性、原型制作速度和可读性之间找到良好的平衡。D2 特别避免的是简洁、紧凑的语法,它会抑制所有这三者。

例如,这里有两种定义圆柱体的方法。

D2

A: Christmas {shape: cylinder}

Mermaid

A[(Christmas)]

D2 不那么紧凑,但更具可读性。

警告 > 错误

D2 将尽可能地进行编译,例如,假设你应用了一个不存在的类,或者添加了一个对特定形状没有影响的样式。如果用户错误是 D2 可以忽略的错误,它会编译成功,最多就是发出警告。没有什么比在调试时注释掉一些代码,然后收到一个停止的错误消息更烦人的了。

安装

推荐的安装方式是运行我们的安装脚本,它会根据您的机器找出最佳的安装方式,比如如果 D2 可使用包管理器,那么它将使用该包管理器进行安装。1个

# With --dryrun the install script will print the commands it will use
# to install without actually installing so you know what it's going to do.
curl -fsSL https://d2lang.com/install.sh | sh -s -- --dry-run
# If things look good, install for real.
curl -fsSL https://d2lang.com/install.sh | sh -s --

按照提示进行操作,通过运行 d2 version 来测试你的安装是否成功。

$ d2 version
v0.0.13

如果你想卸载则可以使用下面的命令:

curl -fsSL https://d2lang.com/install.sh | sh -s -- --uninstall

此外我们也可以直接通过源码进行安装,只需要执行下面的 go install 命令即可:

go install oss.terrastruct.com/d2

当然我们也可以直接从 Github release 页面 https://github.com/terrastruct/d2/releases 下载编译好的二进制文件。

基本使用

安装完成后我们可以用下面的命令先简单测试下 d2 的使用:

$ echo 'x -> y' > input.d2
$ d2 -w input.d2 out.svg

上面的命令会在本地浏览器中打开生成的流程图,当更改 input.d2 内容时该浏览器会自动刷新。

比如我们将 input.d2 内容更改为下面的内容:

x -> y: hello world

这声明了两个形状 x 和 y 之间的连接,标签为 hello world

形状

我们可以像下面的方式来声明一个形状:

imAShape
im_a_shape
im a shape
i'm a shape
# 注意,一个连字符不是连接
# 而 `a--shape` 将是一个连接
a-shape

还可以使用分号在同一行上定义多个形状:

SQLite; Cassandra

默认情况下,一个形状的标签与形状的键相同。但是,如果你希望它有所不同,可以像这样分配一个新标签:

pg: PostgreSQL

默认情况下,形状的类型是矩形,要以其他方式指定,请提供 shape 字段:

Cloud: my cloud
Cloud.shape: cloud

比如下面的代码:

pg: PostgreSQL
Cloud: my cloud
Cloud.shape: cloud
SQLite; Cassandra

会被渲染成如下所示的图形:

键不区分大小写,因此 postgresql 和 postgreSQL 将引用相同的形状。

连接

连接定义形状之间的关系。形状之间的连字符货箭头可以用来定义连接。

Write Replica Canada <-> Write Replica AustraliaRead Replica <- Master
Write Replica -> MasterRead Replica 1 -- Read Replica 2

如果你在一个连接中引用一个未声明的形状,它就会自动创建它,比如上面  hello world 所示示例。

定义连接有 4 种方法:

  • --

  • ->

  • <-

  • <->

连接标签

Read Replica 1 -- Read Replica 2: Kept in sync

连接必须引用形状的键,而不是其标签

be: Backend
fe: Frontend# 这会创建新的形状
Backend -> Frontend# 这将定义现有标签上的连接
be -> fe

比如我们声明如下所示的代码:

Write Replica Canada <-> Write Replica AustraliaRead Replica <- Masterx -- ysuper long shape id here --\-> super long shape id even longer here

渲染后的流程图如下所示:

重复连接

重复连接不会覆盖现有连接。他们会声明一个新的。

DB -> S3: backup
DB -> S3: backup

连接链

为了可读性,在一行中定义多个连接可能看起来更自然。

# 标签应用于链中的每个连接
High Mem Instance -> EC2 <- High CPU Instance: Hosted By

循环

Stage One -> Stage Two -> Stage Three -> Stage Four
Stage Four -> Stage One: repeat

箭头

要覆盖默认箭头形状或在箭头旁边添加标签,请在名为 source-arrowhead 和或 target-arrowhead 的连接上定义一个特殊形状。

a: The best way to avoid responsibility is to say, "I've got responsibilities"
b: Whether weary or unweary, O man, do not rest
c: I still maintain the point that designing a monolithic kernel in 1991 is aa -> b: To err is human, to moo bovine {source-arrowhead: 1target-arrowhead: * {shape: diamond}
}b <-> c: "Reality is just a crutch for people who can't handle science fiction" {source-arrowhead.label: 1target-arrowhead: * {shape: diamondstyle.filled: true}
}d: A black cat crossing your path signifies that the animal is going somewhered -> a -> c

目前,箭头形状选择有三角形、箭头(像三角形但更尖)和菱形,其中菱形可以进一步设置样式为 style.filled: true。默认的箭头形状是三角形。

建议箭头标签保持简短,它们不像常规标签那样通过自动布局进行最佳定位,因此长箭头标签更有可能与周围的对象发生碰撞。

容器

server
# Declares a shape inside of another shape
server.process# Can declare the container and child in same line
im a parent.im a child# Since connections can also declare keys, this works too
apartment.Bedroom.Bathroom -> office.Spare Room.Bathroom: Portal

嵌套语法

我们还可以通过创建嵌套 map 来避免重复容器。

clouds: {aws: {load_balancer -> apiapi -> db}gcloud: {auth -> db}gcloud -> aws
}

容器标签

有两种方法可以定义容器标签。

gcloud: Google Cloud {...
}

或者使用一个 label 标签指定。

gcloud: {label: Google Cloud...
}

比如我们声明如下所示的流程图代码:

clouds: {aws: AWS {load_balancer -> apiapi -> db}gcloud: Google Cloud {auth -> db}gcloud -> aws
}users -> clouds.aws.load_balancer
users -> clouds.gcloud.authci.deploys -> clouds

渲染后的流程图如下所示:

此外我们还可以使用文本或者代码对象、图标或者图片、SQL 表等等。比如下面的代码我们使用了图标对象:

server: {shape: imageicon: https://icons.terrastruct.com/tech/022-server.svg
}github: {shape: imageicon: https://icons.terrastruct.com/dev/github.svg
}server -> github

可以渲染成如下所示的流程图:

除此之外我们还可以自行定制布局、主题、样式等等。

VSCode 插件

D2 有一个官方的、创建者维护的 VSCode 扩展 https://github.com/terrastruct/d2-vscode,可以通过 VSCode 市场免费搜索和下载。该插件完全支持自动缩进和语法突出显示,使用 D2 语言更加愉快。

关于 D2 语言的更多使用可以查看官方文档 https://d2lang.com/tour/intro/ 以了解更多。

Git 仓库:https://github.com/terrastruct/d2

本文转载自:「Github爱好者」,原文:https://url.hi-linux.com/2uYqR,版权归原作者所有。欢迎投稿,投稿邮箱: editor@hi-linux.com。

最近,我们建立了一个技术交流微信群。目前群里已加入了不少行业内的大神,有兴趣的同学可以加入和我们一起交流技术,在 「奇妙的 Linux 世界」 公众号直接回复 「加群」 邀请你入群。

你可能还喜欢

点击下方图片即可阅读

又一款好看的中文字体,可免费商用


点击上方图片,『美团|饿了么』外卖红包天天免费领

更多有趣的互联网新鲜事,关注「奇妙的互联网」视频号全了解!

D2: 一款专用文本绘制流程图的神器相关推荐

  1. php 用什么流程图制作,分享一款简单流程图制作软件,教你快速绘制流程图

    流程图的使用相信大家都不陌生,利用流程图图形与连接线组合而成的图形即为流程图,不仅可以让表达的事情更加清晰明了,对使用者来说也可以更快速的看清楚整件事情的来龙去脉,利用网站编辑流程图是很多朋友都会选择 ...

  2. flex 画流程图_分享一款简单流程图制作软件,教你快速绘制流程图

    分享一款简单流程图制作软件,教你快速绘制流程图 2019-11-20 10:35:40 0点赞 3收藏 1评论 流程图的使用相信大家都不陌生,利用流程图图形与连接线组合而成的图形即为流程图,不仅可以让 ...

  3. 每日安利:三款绘制流程图软件

    目前我在接触一个新事物或者新工作的时候,会通过绘制流程图来直观清晰的了解其内容及流程.这一习惯起源于在上学时老师要求我们要绘制流程图,而且还经常布置相关的作业让我们养成这一习惯,在这里还是非常感谢这位 ...

  4. 一款基于VUE的在线绘制流程图工具安装使用node.js

    1.安装node.js 下载地址:https://nodejs.org/en/download/ 安装一下三项,并检查是否成功: node -v npm -v vue -V(大写的V) 一款基于VUE ...

  5. 绘制流程图用什么软件好?你选对了吗?

    流程图可以让复杂的数据流程图可以让复杂的数据清楚的条例出来,使用或者观看的时候更加方便.流程图中用图表.图形的方式表现事物的逻辑关系,相比文字来说更加形象.易懂一些.那么做流程图什么软件比较好呢?接下 ...

  6. MySQL系统流程图怎么画_Word流程图怎么画?如何轻松绘制流程图

    流程图是表示生产作业前后次序的图示.不管是对于科学工作者还是设计专业毕业生来说,流程图画的好,可以让自己的设计思路简洁明了,表达的更清晰.一般绘制流程图选择Word和专业流程图绘制工具-亿图图示,本文 ...

  7. 【高效工具】《三》Typora直接使用MarkDown语法绘制流程图、时序图、甘特图

    平常使用Typora撰写内容的时候,偶尔会用到流程图,原来一直使用Word来作图,在插入到文档中,昨天偶然间了解到Typora支持使用mermaid来绘制流程图,才发现自己差点Out了.此处整理一下如 ...

  8. 如何利用在线画图网站绘制流程图

    流程图在我们的日常生活中运用的非常广泛,一般绘制流程图的方法有两种,一种是手绘,另一种是利用在线网站进行绘制,更多的人们将使用第二种方法进行绘制,那么,对于一名新手来说拿到一个工具应该怎样进行绘制呢? ...

  9. 如何在Excel中绘制流程图

    流程图在我们的日常办公中运用的十分广泛,很多人刚接触绘制流程图的时候都说很难,是这样吗?在我们做流程图的时候有很多专业的流程图软件可以完成,但不定能做出自己想要的效果,选择一款合适的工具很重要,而不能 ...

最新文章

  1. linux c 判断文件打开文件,Linux 用C语言判断文件和文件夹
  2. 彻底解决_OBJC_CLASS_$_某文件名“, referenced from:问题
  3. 基于MATLAB的面对对象编程(3)——事件和响应
  4. 售前笔记(四)——呈现沟通(PPT交流)
  5. php post undefined index,PHP 中提示undefined index如何解决(多种方法)
  6. javascript 数组操作函数
  7. 电脑外接显示器或ipad分屏
  8. 导入oracle 904,江湖救急..ora-904怎么处理?
  9. linux 检查系统丢包,Linux 下网络丢包问题处理
  10. 戴尔r410服务器虚拟磁盘,DELL服务器R410原装 SAS 6/IR RAID卡 阵列控制器卡 支持RAID0,1...
  11. 阿里高管的思考方式真正厉害在哪?内部员工7000字深度干货
  12. 解析机器人视觉系统的神奇之处
  13. 2019春季学期个人总结
  14. 论文笔记—A Review of Visual-LiDAR Fusion based Simultaneous Localization and Mapping
  15. layer扩展打开/关闭动画
  16. preg_replace() 正则替换所有符合条件的字符串
  17. Linux NAS 盘挂载
  18. python常用数据作图--matplotlib用法(相关设置及常用图)
  19. Low Resource ASR: The surprising effectiveness of High Resource Transliteration--低资源ASR:高资源音译的惊人效果
  20. appfog mysql_麻烦隧道我的本地Wordpress安装到appfog上的MySQL数据库

热门文章

  1. 开发景区小程序对景区有什么用?
  2. python 写一个带有菜单界面_python菜单界面
  3. Python上位机软件图形界面实战——PyQt
  4. 华东师范大学2018.11月赛【EOJ Monthly 2018.11】
  5. Android手机端无人机地面站源码
  6. 2021年项城一高理科高考成绩查询,项城一高举行2021年高考壮行大会
  7. 米联客FDMA3.1数据缓存方案全网最细讲解,自创升级版,送3套视频和音频缓存工程源码
  8. Oracle 19c OCP 1Z0-082认证考试题库(30-35)
  9. app功耗测试-adb命令
  10. c++ 函数返回数组