本系列介绍 文本转图片 工具，图形描述语言将图片描述为代码或者文本，有利于版本管理，很适合嵌入 LaTeX 或 Markdown 文档。用于网站时，还可以减轻图片存储压力，因为图片可以根据代码在使用时生成。本文是该系列第九篇，介绍 draft。

概述

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），每个组件可以有以下属性：

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)的符号。

连接关系

连接关系可以定义的属性：

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,...

draft画廊

以上就是全部内容，欢迎到 文本转图片工具 试用。