本系列介绍 文本转图片 工具，图形描述语言将图片描述为代码或者文本，有利于版本管理，很适合嵌入 LaTeX 或 Markdown 文档。用于网站时，还可以减轻图片存储压力，因为图片可以根据代码在使用时生成。本文是该系列第九篇，介绍 draft。
Contents
概述
A commandline tool that generate High Level microservice & serverless Architecture diagrams using a declarative syntax defined in a YAML file.
A picture is worth a thousand words… and this is particularly true in regard to complex IT architectures.
draft
Draft 是一个命令行工具，能将 使用 YAML 描述的微服务架构转换成 Graphviz Dot 源码，然后用 dot 生成架构图。
语法介绍
Draft 架构图的基本单元叫做 组件（components），每个组件可以有以下属性：
|
1 2 3 4 5 6 7 8 9 |
type Component struct { ID string `yaml:"id,omitempty"` // optional - autogenerated if omitted (read more for details...) Kind string `yaml:"kind"` // required (one of: service, gateway, queue, broker, function, storage, database) Label string `yaml:"label,omitempty"` // optional - the component description (or scope) Provider string `yaml:"provider,omitempty"` // optional - you can use this to specify the implementation FillColor string `yaml:"fillColor,omitempty"` // optional - the hex code for the background color FontColor string `yaml:"fontColor,omitempty"` // optional - the hex code for the foreground color Rounded bool `yaml:"rounded,omitempty"` // optional - set to true if you wants rounded shapes } |
Draft使用了一组独立于不同提供商(AWS、Microsoft Azure、GCP)的符号。
Client
|
1 2 3 4 5 6 7 |
title: Client backgroundColor: '#ffffff' components: - kind: client label: "Web App" fileColor: "#ee82ee" |
Microservice
|
1 2 3 4 5 6 |
title: Microservice backgroundColor: '#ffffff' components: - kind: service label: "μService" |
Gateway
|
1 2 3 4 5 6 |
title: Gateway backgroundColor: '#ffffff' components: - kind: gateway label: "API Gateway" |
Message Broker
|
1 2 3 4 5 6 |
title: Message Broker backgroundColor: '#ffffff' components: - kind: broker label: "Message Broker" |
Queue Service
|
1 2 3 4 5 6 |
title: Queue Service backgroundColor: '#ffffff' components: - kind: queue label: "Queue Service" |
Object Storage
|
1 2 3 4 5 6 |
title: Object Storage backgroundColor: '#ffffff' components: - kind: storage label: "*.jpg\n*.png" |
Function
|
1 2 3 4 5 6 |
title: Function backgroundColor: '#ffffff' components: - kind: function label: "Create \nAuth Challange" |
Database
|
1 2 3 4 5 6 |
title: Database backgroundColor: '#ffffff' components: - kind: database label: "Users \nRepository" |
连接关系
连接关系可以定义的属性：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
type Connection struct { Origin struct { ComponentID string `yaml:"componentId"` } `yaml:"origin"` Targets []struct { ComponentID string `yaml:"componentId"` Label string `yaml:"label,omitempty"` Color string `yaml:"color,omitempty"` Dashed bool `yaml:"dashed,omitempty"` Dir string `yaml:"dir,omitempty"` Highlight bool `yaml:"highlight,omitempty"` } `yaml:"targets"` } |
componentId 可以显式定义，也可以自动生成，自动生成规则如下：
| a kind of... | will generate an id prefix with... | examples |
|---|---|---|
client | cl | cl1, cl2,... |
service | ms | ms1, ms2,... |
gateway | gt | gt1, gt2,... |
broker | br | br1, br2,... |
queue | qs | qs1, qs2,... |
storage | st | st1, st2,... |
function | fn | fn1, fn2,... |
database | db | db1, db2,... |
iddraft画廊
以上就是全部内容，欢迎到 文本转图片工具 试用。
发表回复