设计流程好工具-D2 Lang
2025 年 1 月 5 日 星期日(已编辑)
AI·GEN
关键洞察
D2 是一种将文本转换为图表的现代脚本语言，支持动态渲染和自定义样式。文章介绍了其功能、在线 Playground 的实现，以及通过 Docker 部署后端服务的优化方案
这篇文章上次修改于 2025 年 1 月 5 日 星期日，可能部分内容已经不适用，如有疑问可询问作者。
在线尝试
https://play.d2lang.com/?script=qlDQtVOo5AIEAAD__w%3D%3D&
D2 is a modern diagram scripting language that turns text to diagrams.
一种将文本转换为图表的现代图表脚本语言。
vars: {
d2-config: {
layout-engine: elk
# Terminal theme code
theme-id: 300
}
}
network: {
cell tower: {
satellites: {
shape: stored_data
style.multiple: true
}
transmitter
satellites -> transmitter: send
satellites -> transmitter: send
satellites -> transmitter: send
}
online portal: {
ui: {shape: hexagon}
}
data processor: {
storage: {
shape: cylinder
style.multiple: true
}
}
cell tower.transmitter -> data processor.storage: phone logs
}
user: {
shape: person
width: 66
}
user -> network.cell tower: make call
user -> network.online portal.ui: access {
style.stroke-dash: 3
}
api server -> network.online portal.ui: display
api server -> logs: persist
logs: {shape: page; style.multiple: true}
network.data processor -> api server
最终渲染的 SVG
渲染动图
shape: sequence_diagram
classes: {
animated: {
style: {
stroke: "#2563eb"
stroke-width: 2
animated: true
}
}
success: {
style: {
stroke: "#22c55e"
stroke-width: 2
animated: true
}
}
error: {
style: {
stroke: "#ef4444"
stroke-dash: 5
animated: true
}
}
}
# 定义参与者
browser: 浏览器 {
style.font-size: 16
}
api: API服务 {
style.font-size: 16
}
db: 数据库 {
style.font-size: 16
}
email: 邮件服务 {
style.font-size: 16
}
# 主流程
browser -> api: 提交注册表单 {
class: animated
}
# API 验证组
group: 数据验证 {
api -> api: 验证表单数据
api -> db: 检查邮箱是否存在 {
class: animated
}
db -> api: 返回检查结果 {
class: success
}
}
# 条件分支
api -> db: 创建新用户 {
class: animated
}
db -> api: 创建成功 {
class: success
}
api -> email: 发送验证邮件 {
class: animated
}
email -> api: 发送失败 {
class: error
}
api -> browser: 返回注册成功消息 {
class: success
}
# 添加注释
note: |md
## 动画说明
* 蓝色线条：基础请求流程
* 绿色线条：成功响应
* 红色虚线：错误响应
* 动画时长：1-2秒不等
|
在线Playground
官方展示的方式是点击编译按钮会请求一个接口返回生成后的 svg。
将代码拉取下来，发现并不能用， 可能没找到地方 =.=
api.d2lang.com/render/svg这个后端服务没找到对应的 Repo。 于是希望可以实现一个后端 去替换官方这个接口功能
实现
技术栈选择
- Hono 后端服务
- 部署 Docker DockerCompose
- CICD - 阿里云效
基本原理 通过 docker volumes 去挂载一个 release 发布的d2 二进制
然后请求接口的时候 执行d2 命令
优化项
加入了 share 参数 ，如果请求接口是 share 那么会存入 db 并且上传到 oss 加速
请求 share 接口 是直接返回生成后的SVG 的 ，方便插入到 博客 或者 文档里 \n
如果传参 shareID 那么会进行更新操作
后期优化项目
实现一个 Playground
- 可以进行分享
- 二次编辑 更新
- 保存历史记录