Add four new components: balancer, cdn, dns, html

README.md

@@ -2,8 +2,8 @@
 
 A commandline tool that generate **H**igh **L**evel microservice & serverless **A**rchitecture diagrams using a declarative syntax defined in a YAML file.
 
-- Works on Linux, Mac OSX, Windows
-- Just a single portable binary file
+- Works on [linux, macOS, windows](https://github.com/lucasepe/draft/releases/latest)
+- Just a [single portable binary file](https://github.com/lucasepe/draft/releases/latest)
 - It Does One Thing Well
 - Input data in flat YAML text files
 - Usable with shell scripts
@@ -40,8 +40,8 @@ The basic unit of each _draft_ design is the `component`:
 ```go
 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)  
+  Kind      string `yaml:"kind"`                // required - see the table below
+  Label     string `yaml:"label,omitempty"`     // optional - works only for: 'queue', 'service', 'storage', 'function', 'database', 'client'  
   Provider  string `yaml:"provider,omitempty"`  // optional - you can use this to specify the cloud provider
   Impl      string `yaml:"impl,omitempty"`      // optional - you can use this to specify the implementation
   FillColor string `yaml:"fillColor,omitempty"` // optional - the hex code for the background color 
@@ -60,16 +60,25 @@ Eventually you can describe...
 
 Below is a list of all the components currently implemented.
 
-| Component          | Kind        | YAML                      | Output                           |
-|:-------------------|:------------|:--------------------------|:--------------------------------:|
-| **Client**         | `client`    | ![](./examples/cl.jpg)    | ![](./examples/client.png)       |
-| **Microservice**   | `service`   | ![](./examples/ms.jpg)    | ![](./examples/service.png)      |
-| **Gateway**        | `gateway`   | ![](./examples/gt.jpg)    | ![](./examples/gateway.png)      |
-| **Message Broker** | `broker`    | ![](./examples/br.jpg)    | ![](./examples/broker.png)       |
-| **Queue Service**  | `queue`     | ![](./examples/qs.jpg)    | ![](./examples/queue.png)        |
-| **Object Storage** | `storage`   | ![](./examples/st.jpg)    | ![](./examples/storage.png)      |
-| **Function**       | `function`  | ![](./examples/fn.jpg)    | ![](./examples/function.png)     |
-| **Database**       | `database`  | ![](./examples/db.jpg)    | ![](./examples/database.png)     |
+| Component          | Kind        | YAML                                                          | Output                            |
+|:-------------------|:------------|:--------------------------------------------------------------|:---------------------------------:|
+| **Client**         | `client`    | 👉 [examples/client.yml](./examples/client.yml)               | ![](./examples/client.png)        |
+| **Microservice**   | `service`   | 👉 [examples/service.yml](./examples/service.yml)             | ![](./examples/service.png)       |
+| **Gateway**        | `gateway`   | 👉 [examples/gateway.yml](./examples/gateway.yml)             | ![](./examples/gateway.png)       |
+| **Message Broker** | `broker`    | 👉 [examples/broker.yml](./examples/broker.yml)               | ![](./examples/broker.png)        |
+| **Queue Service**  | `queue`     | 👉 [examples/queue.yml](./examples/queue.yml)                 | ![](./examples/queue.png)         |
+| **Object Storage** | `storage`   | 👉 [examples/storage.yml](./examples/storage.yml)             | ![](./examples/storage.png)       |
+| **Function**       | `function`  | 👉 [examples/function.yml](./examples/function.yml)           | ![](./examples/function.png)      |
+| **Database**       | `database`  | 👉 [examples/database.yml](./examples/database.yml)           | ![](./examples/database.png)      |
+| **Load Balancer**  | `balancer`  | 👉 [examples/balancer.yml](./examples/balancer.yml)           | ![](./examples/balancer.png)      |
+| **CDN**            | `cdn`       | 👉 [examples/cdn.yml](./examples/cdn.yml)                     | ![](./examples/cdn.png)           |
+| **DNS**            | `dns`       | 👉 [examples/dns.yml](./examples/dns.yml)                     | ![](./examples/dns.png)           |
+| **Custom Html**    | `html`      | 👉 [examples/custom_image.yml](./examples/custom_image.yml)   | ![](./examples/custom_image.png)  |
+
+For custom HTML components (_kind: html_) only these tags are supported:
+
+- `<b>`, `<br/>`, `<font>`, `<hr>`, `<i>`, `<img> (in <td>…</td> only)`
+- `<o>`, `<s>`, `<sub>`, `<sup>`, `<table>`, `<tr>`, `<u>`
 
 ### Notes about a component `id`
 
@@ -82,16 +91,20 @@ An auto-generated component `id` has a prefix and a sequential number
 
 - the prefix is related to the component `kind`
 
-| 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,..._ |
+| a kind of... | will generate an `id` prefix with... | example          | 
+|:-------------|:-------------------------------------|:-----------------|
+| `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,..._   |
+| `balancer`   | lb                                   | _lb1, lb2,..._   |
+| `cdn`        | cn                                   | _cn1, cn2,..._   |
+| `dns`        | dn                                   | _dn1, dn2,..._   |
+| `html`       | htm                                  | _htm1, htm2,..._ |            
 
 ## Connections
 
@@ -163,8 +176,7 @@ draft s3-upload-presigned-url.yml | dot -Tpng > s3-upload-presigned-url.png
 
 Check out the  👉 [./examples/](/examples/) folders for more `draft` architecture descriptor YAML examples.
 
-
-
+
 ---
 
 (c) 2020 Luca Sepe http://lucasepe.it. MIT License

balancer.go

@@ -0,0 +1,37 @@
+package draft
+
+import (
+	"fmt"
+	"strings"
+
+	"github.com/emicklei/dot"
+	"github.com/lucasepe/draft/pkg/cluster"
+	"github.com/lucasepe/draft/pkg/node"
+)
+
+type balancer struct {
+	seq int16
+}
+
+func (rcv *balancer) nextID() string {
+	rcv.seq++
+	return fmt.Sprintf("lb%d", rcv.seq)
+}
+
+func (rcv *balancer) sketch(graph *dot.Graph, comp Component) {
+	id := comp.ID
+	if strings.TrimSpace(comp.ID) == "" {
+		id = rcv.nextID()
+	}
+
+	cl := cluster.New(graph, id, cluster.Label(comp.Impl))
+
+	el := node.New(cl, id,
+		node.Label("LB", false),
+		node.Rounded(comp.Rounded),
+		node.FontColor(comp.FontColor),
+		node.FillColor(comp.FillColor, "#1a5276ff"),
+		node.Shape("Mdiamond"),
+	)
+	el.Attr("height", "0.3")
+}

broker.go

@@ -24,22 +24,17 @@ func (rcv *broker) sketch(graph *dot.Graph, comp Component) {
 		id = rcv.nextID()
 	}
 
-	label := comp.Label
-	if strings.TrimSpace(comp.Label) == "" {
-		label = "Message\nBroker"
-	}
-
 	cl := cluster.New(graph, id, cluster.Label(comp.Impl))
 
 	el := node.New(cl, id,
-		node.Label(label),
+		node.Label("Message Broker", false),
 		node.Rounded(comp.Rounded),
+		node.FontSize(7),
 		node.FontColor(comp.FontColor),
 		node.FillColor(comp.FillColor, "#e0eeeeff"),
 		node.Shape("cds"),
 	)
-	el.Attr("height", "0.6")
-	el.Attr("width", "1.2")
+	el.Attr("width", "1.4")
 }
 
 /** Alternative

cdn.go

@@ -0,0 +1,36 @@
+package draft
+
+import (
+	"fmt"
+	"strings"
+
+	"github.com/emicklei/dot"
+	"github.com/lucasepe/draft/pkg/cluster"
+	"github.com/lucasepe/draft/pkg/node"
+)
+
+type cdn struct {
+	seq int16
+}
+
+func (rcv *cdn) nextID() string {
+	rcv.seq++
+	return fmt.Sprintf("cn%d", rcv.seq)
+}
+
+func (rcv *cdn) sketch(graph *dot.Graph, comp Component) {
+	id := comp.ID
+	if strings.TrimSpace(comp.ID) == "" {
+		id = rcv.nextID()
+	}
+
+	cl := cluster.New(graph, id, cluster.Label(comp.Impl))
+
+	el := node.New(cl, id,
+		node.Label("CDN", false),
+		node.FontColor(comp.FontColor),
+		node.FillColor(comp.FillColor, "#47df9aff"),
+		node.Shape("Mcircle"),
+	)
+	el.Attr("height", "0.5")
+}

client.go

@@ -27,7 +27,7 @@ func (rcv *client) sketch(graph *dot.Graph, comp Component) {
 	cl := cluster.New(graph, id, cluster.Label(comp.Impl))
 
 	el := node.New(cl, id,
-		node.Label(comp.Label),
+		node.Label(comp.Label, false),
 		node.Rounded(comp.Rounded),
 		node.FontColor(comp.FontColor),
 		node.FillColor(comp.FillColor, "#90ee90ff"),

cmd/draft-all.sh

@@ -13,6 +13,10 @@ declare -a arr=("$SRC_DIR/client.yml"
                 "$SRC_DIR/function.yml"
                 "$SRC_DIR/database.yml"
                 "$SRC_DIR/storage.yml"
+                "$SRC_DIR/balancer.yml"
+                "$SRC_DIR/cdn.yml"
+                "$SRC_DIR/dns.yml"
+                "$SRC_DIR/custom_image.yml"
                 "$SRC_DIR/message-bus-pattern.yml"
                 "$SRC_DIR/aws-cognito-custom-auth-flow.yml"
                 "$SRC_DIR/s3-upload-presigned-url.yml"

database.go

@@ -27,7 +27,7 @@ func (rcv *database) sketch(graph *dot.Graph, comp Component) {
 	cl := cluster.New(graph, id, cluster.Label(comp.Impl))
 
 	el := node.New(cl, id,
-		node.Label(comp.Label),
+		node.Label(comp.Label, false),
 		node.Rounded(comp.Rounded),
 		node.FontColor(comp.FontColor),
 		node.FillColor(comp.FillColor, "#f5f5dcff"),

dns.go

@@ -0,0 +1,36 @@
+package draft
+
+import (
+	"fmt"
+	"strings"
+
+	"github.com/emicklei/dot"
+	"github.com/lucasepe/draft/pkg/cluster"
+	"github.com/lucasepe/draft/pkg/node"
+)
+
+type dns struct {
+	seq int16
+}
+
+func (rcv *dns) nextID() string {
+	rcv.seq++
+	return fmt.Sprintf("dn%d", rcv.seq)
+}
+
+func (rcv *dns) sketch(graph *dot.Graph, comp Component) {
+	id := comp.ID
+	if strings.TrimSpace(comp.ID) == "" {
+		id = rcv.nextID()
+	}
+
+	cl := cluster.New(graph, id, cluster.Label(comp.Impl))
+
+	el := node.New(cl, id,
+		node.Label("DNS", false),
+		node.FontColor(comp.FontColor),
+		node.FillColor(comp.FillColor, "#854eadff"),
+		node.Shape("Msquare"),
+	)
+	el.Attr("height", "0.3")
+}

draft.go

@@ -13,6 +13,7 @@ import (
 )
 
 const (
+	kindHTML     = "html"
 	kindClient   = "client"
 	kindGateway  = "gateway"
 	kindService  = "service"
@@ -21,6 +22,9 @@ const (
 	kindStorage  = "storage"
 	kindDatabase = "database"
 	kindFunction = "function"
+	kindBalancer = "balancer"
+	kindCDN      = "cdn"
+	kindDNS      = "dns"
 )
 
 // Connection is a link between two components.
@@ -68,6 +72,7 @@ func NewDraft(r io.Reader) (*Draft, error) {
 		sketchers: map[string]interface {
 			sketch(*dot.Graph, Component)
 		}{
+			kindHTML:     &html{},
 			kindClient:   &client{},
 			kindGateway:  &gateway{},
 			kindService:  &service{},
@@ -76,6 +81,9 @@ func NewDraft(r io.Reader) (*Draft, error) {
 			kindFunction: &function{},
 			kindStorage:  &storage{},
 			kindDatabase: &database{},
+			kindBalancer: &balancer{},
+			kindCDN:      &cdn{},
+			kindDNS:      &dns{},
 		},
 	}
 

examples/backend-for-frontend.yml

@@ -11,10 +11,14 @@ components:
     fillColor: '#708090'
   -
     kind: gateway
-    label: "Web BFF\nAPI Gateway"
+    impl: |
+      Web BFF
+      API Gateway
   -
     kind: gateway
-    label: "Mobile BFF\nAPI Gateway"
+    impl: |
+      Mobile BFF
+      API Gateway
   -
     kind: service
     label: μService A

examples/balancer.yml

@@ -0,0 +1,4 @@
+--- 
+components: 
+  - 
+    kind: balancer

examples/cdn.yml

@@ -0,0 +1,4 @@
+--- 
+components: 
+  - 
+    kind: cdn

examples/client_side_discovery.yml

@@ -0,0 +1,64 @@
+backgroundColor: '#ffffff'
+components:
+  -
+    kind: client
+    label: Client
+  -
+    kind: service
+    label: |-
+      <table border="0">
+        <tr><td><b>Service</b></td><td><b>IP Addr.</b></td></tr>
+        <tr><td>μService</td><td>10.234.30.1</td></tr>
+        <tr><td>μService</td><td>10.234.30.2</td></tr>
+        <tr><td>μService</td><td>10.234.30.3</td></tr>
+        <tr><td>...</td><td>...</td></tr>
+      </table>
+    html: true
+    impl: Service Registry
+  -
+    kind: service
+    label: μService
+    impl: "Instance #1 @10.234.30.1"
+  -
+    kind: service
+    label: μService
+    impl: "Instance #2 @10.234.30.2"
+  -
+    kind: service
+    label: μService
+    impl: "Instance #3 @10.234.30.3"
+connections:
+  -
+    origin: 
+      componentId: cl1
+    targets:
+      -
+        componentId: ms1
+        label: Query(μService)
+  -
+    origin: 
+      componentId: ms1
+    targets:
+      -
+        componentId: ms2
+        dir: back
+        color: '#63625b'
+        dashed: true
+      -
+        componentId: ms3
+        dir: back
+        color: '#63625b'
+        dashed: true
+      -
+        componentId: ms4
+        dir: back
+        color: '#63625b'
+        dashed: true
+  -
+    origin: 
+      componentId: cl1
+    targets:
+      -
+        componentId: ms3
+        label: Load Balance Request
+  -