Javascript is required
设计流程好工具-D2 Lang
业务

https://d2lang.com/

在线尝试

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

  • 可以进行分享
  • 二次编辑 更新
  • 保存历史记录