icon restyling and more connection attrs (see CHANGELOG.md)

.gitignore

@@ -34,3 +34,4 @@ go.sum
 # Goreleaser builds
 dist/**
 
+icons/**

CHANGELOG.md

@@ -4,6 +4,18 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.8.0] - 2020-07-04
+### Added
+- 🎉 default component icons embedded in the [draft](https://github.com/lucasepe/draft) binary executable
+- 🎉 new connection attribute `num` in order to eventyally number them
+- 🎉 new `labeldistance` `labelangle` and `minlen` attributes in order to have full control of labels displacement
+
+### Changed
+- complete restyling of the icons representing the individual components (see [README.md](./README.md))
+- to render different providers implementations in the same graph `provider` is a _component_ attribute now
+- you can add eventually some simple HTML tag to the component attribute `label`
+- `-impl` flag it's now a simple boolean, if specified it will show each component `impl` attribute - otherwise it will be hide
+
 ## [0.7.0] - 2020-06-27
 ### Added
 - 🎉 load architecture YAML files from remote HTTP sites 

README.md

@@ -46,114 +46,152 @@ To install GraphViz to your favorite OS, please, follow this link [https://graph
 
 # Components
 
-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 - see the table below
-  Label     string `yaml:"label,omitempty"`     // optional - works only for: 'queue', 'service', 'storage', 'function', 'database', 'client'  
-  Outline   string `yaml:"outline,omitempty"`   // optional - you can use this to groups some components
-  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 
-  FontColor string `yaml:"fontColor,omitempty"` // optional - the hex code for the foreground color
-}
-```
+The basic unit of each _draft_ design is the `component`, has these attributes:
+
+| Name      | Required | Scope                         | Notes                                                   |
+|:----------|:--------:|:------------------------------|---------------------------------------------------------|
+| id        | no       | used for the connecttions     | autogenerated if omitted (read more for details...)     |
+| kind      | yes      | identify the component type   | see [all available kinds](#list-of-all-available-kinds) |
+| provider  | no       | get the specific provider icon| see [using custom icons](#using-custom-icons)           |
+| label     | no       | text below the component icon | can contain basic HTML tags                             |
+| outline   | no       | tag to group components       |                                                         |
+| impl      | no       | text above the icon           | can use this to specify the provider implementation     |
+| fontColor | no       | the label text color          | hex color code - supports transparency too              |
 
-Draft uses a set of symbols independent from the different providers (AWS, Microsoft Azure, GCP). 
+### Notes about a component `id`
+
+- you can define your component `id` explicitly (i.e. _id: MY_SERVICE_A_)
+- or you can omit the component `id` attribute and it will be autogenerated
+
+### How is auto-generated a component `id`?
 
-Eventually you can describe...
+An auto-generated component `id` has a prefix and a sequential number
+
+- the prefix is related to the component `kind`
+  - examples _waf1, ..., wafN_ or _ser1, ..., serN_ etc.
 
-- the implementation using the `impl` attribute (ie: _impl: 'SQS'_)
-- the group using the `outline` attribute (ie: _outline: AWS_)
-  - 💡 components with the same outline will be 'grouped'
+# List of all available kinds
+
+Draft uses a set of symbols independent from the different providers (AWS, Microsoft Azure, GCP). 
 
 Below is a list of all the components currently implemented.
 
-| Component          | Kind  | YAML                                        | Output                   | 
-|:-------------------|:------|:--------------------------------------------|:------------------------:|
-| **Client**         | `cli` | 👉 [examples/cli.yml](./examples/cli.yml)   | ![](./examples/cli.png)  |
-| **Microservice**   | `ser` | 👉 [examples/ser.yml](./examples/ser.yml)   | ![](./examples/ser.png)  |  
-| **Gateway**        | `gtw` | 👉 [examples/gtw.yml](./examples/gtw.yml)   | ![](./examples/gtw.png)  |
-| **Firewall**       | `waf` | 👉 [examples/waf.yml](./examples/waf.yml)   | ![](./examples/waf.png)  | 
-| **K8s Engine**     | `kub` | 👉 [examples/kub.yml](./examples/kub.yml)   | ![](./examples/kub.png)  |
-| **Pub / Sub**      | `msg` | 👉 [examples/msg.yml](./examples/msg.yml)   | ![](./examples/msg.png)  | 
-| **Queue**          | `que` | 👉 [examples/que.yml](./examples/que.yml)   | ![](./examples/que.png)  | 
-| **Function**       | `fun` | 👉 [examples/fun.yml](./examples/fun.yml)   | ![](./examples/fun.png)  |
-| **Relational DB**  | `rdb` | 👉 [examples/rdb.yml](./examples/rdb.yml)   | ![](./examples/rdb.png)  | 
-| **Document DB**    | `doc` | 👉 [examples/doc.yml](./examples/doc.yml)   | ![](./examples/doc.png)  | 
-| **Caching**        | `mem` | 👉 [examples/mem.yml](./examples/mem.yml)   | ![](./examples/mem.png)  | 
-| **Load Balancer**  | `lba` | 👉 [examples/lba.yml](./examples/lba.yml)   | ![](./examples/lba.png)  |
-| **CDN**            | `cdn` | 👉 [examples/cdn.yml](./examples/cdn.yml)   | ![](./examples/cdn.png)  |
-| **DNS**            | `dns` | 👉 [examples/dns.yml](./examples/dns.yml)   | ![](./examples/dns.png)  |
-| **Block Store**    | `bst` | 👉 [examples/bst.yml](./examples/bst.yml)   | ![](./examples/bst.png)  |
-| **Object Store**   | `ost` | 👉 [examples/ost.yml](./examples/ost.yml)   | ![](./examples/ost.png)  |
-| **File Store**     | `fst` | 👉 [examples/fst.yml](./examples/fst.yml)   | ![](./examples/fst.png)  |
-
-## Auto filling the component implementation
-
-In your YAML file, leave the `impl` fields empty and run [draft](https://github.com/lucasepe/draft/releases/latest) with the `-impl` flag to let [draft](https://github.com/lucasepe/draft/releases/latest) found the implementation by provider.
-
-| example command                                                               | output                         |
-|:------------------------------------------------------------------------------|:------------------------------:|
-| <code>draft -impl aws ./examples/dns.yml &#124; dot -Tpng > test.png</code>   | ![](./examples/dns_aws.png)    |
-| <code>draft -impl azure ./examples/dns.yml &#124; dot -Tpng > test.png<code>  | ![](./examples/dns_azure.png)  |
-| <code>draft -impl google ./examples/kub.yml &#124; dot -Tpng > test.png<code>    | ![](./examples/kub_google.png)    |
-| <code>draft -impl aws ./examples/kub.yml &#124; dot -Tpng > test.png<code>    | ![](./examples/kub_aws.png)    |
-
-... and so on for each kind of component!
-
-To render components with specific icons read below.
-
-## Rendering components with specific cloud provider icons
+## Clients
+
+Sample YAML file [examples/clients.yml](./examples/clients.yml).
+
+```bash
+draft -impl -verbose examples/clients.yml | dot -Gdpi=110 -Tpng > examples/clients.png
+```
+
+![Clients](examples/clients.png)
+
+## Networking
+
+Sample YAML file [examples/networking.yml](./examples/networking.yml).
+
+```bash
+draft -impl -verbose examples/networking.yml | dot -Gdpi=110 -Tpng > examples/networking.png
+```
+
+![Networking](examples/networking.png)
+
+## Compute
+
+Sample YAML file [examples/compute.yml](./examples/compute.yml).
+
+```bash
+draft -impl -verbose examples/compute.yml | dot -Gdpi=110 -Tpng > examples/compute.png
+```
+
+![Compute](examples/compute.png)
+
+## Database
+
+Sample YAML file [examples/database.yml](./examples/database.yml).
+
+```bash
+draft -impl -verbose examples/database.yml | dot -Gdpi=110 -Tpng > examples/database.png
+```
+
+![Database](examples/database.png)
+
+## Storage
+
+Sample YAML file [examples/storage.yml](./examples/storage.yml).
+
+```bash
+draft -impl -verbose examples/storage.yml | dot -Gdpi=110 -Tpng > examples/storage.png
+```
+
+![Storage](examples/storage.png)
+
+## Security
+
+Sample YAML file [examples/security.yml](./examples/security.yml).
+
+```bash
+draft -impl -verbose examples/security.yml | dot -Gdpi=110 -Tpng > examples/security.png
+```
+
+![Security](examples/security.png)
+
+# Using custom icons
+
+Here how to render components with specific _aws_, _google_ and _azure_ icons.
 
 1. Download the <u>PNG</u> icons of your cloud provider [AWS](https://aws.amazon.com/it/architecture/icons/), [GCP](https://cloud.google.com/icons), [Azure](https://www.microsoft.com/en-us/download/details.aspx?id=41937)
 
-2. Take only the icons related to the components supported by [draft](https://github.com/lucasepe/draft/releases/latest)
+2. Take only the icons related to the [components supported](#list-of-all-available-kinds) by [draft](https://github.com/lucasepe/draft/releases/latest)
 
 3. Make a directory with the provider name (i.e. `/draft/icons/aws`, `/draft/icons/google`, `/draft/icons/azure`) 
 
 4. Rename each icon as [draft](https://github.com/lucasepe/draft/releases/latest) components `kind` (i.e. `dns.png`, `cdn.png` and so on...)
 
-5. Run [draft](https://github.com/lucasepe/draft/releases/latest) specifyng the `-impl` and the icons folder using the environment variable `DRAFT_ICONS_PATH`
-  - example: `DRAFT_ICONS_PATH=/draft/icons draft -impl aws my-file.yml | dot > ark-aws.png`
+5. Run [draft](https://github.com/lucasepe/draft/releases/latest) specifyng the icons folder using the environment variable `DRAFT_ICONS_PATH`
+  - example: `DRAFT_ICONS_PATH=/draft/icons draft my-file.yml | dot > ark-aws.png`
 
 👉 I have already done all the work for points 1 to 4. So you can avoid it by copying the directory [icons](./icons) 👈
 
-### Notes about a component `id`
 
-- you can define your component `id` explicitly (i.e. _id: MY_SERVICE_A_)
-- or you can omit the component `id` attribute and it will be autogenerated
+# Connections
 
-### How is auto-generated a component `id`?
+The arrows that join the components. 
 
-An auto-generated component `id` has a prefix and a sequential number
+To connect an _origin_ component with one or more _targets_ component you need to specify at least each `id`.
 
-- the prefix is related to the component `kind`
-  - examples _waf1, ..., wafN_ or _ser1, ..., serN_ etc.
+A _connection_ has the following properties:
 
-# Connections
+| Attribute | Type     | Required | What is it?                    |
+|:----------|:--------:|:--------:|--------------------------------|
+| origin    | string   | yes      | id of the starting component   |
+| targets   | object   | yes      | one or more destinations       |
 
-You can connect each component by arrows.
+Each _target_ has the following properties:
 
-To be able to connect an _origin component_ with one or more _target component_ you need to specify each `id`.
+| Attribute      | Type     | Required | What is it?                                       |
+|:---------------|:--------:|:--------:|---------------------------------------------------|
+| id             | string   | yes      | target component id                               |
+| label          | string   | no       | text on the connection                            |
+| labeldistance  | float    | no       | distance of the label from the connection tail    |
+| labelangle     | float    | no       | determine the label position relative to the tail |
+| minlen         | float    | no       | sets the minimum connection length                |
+| num            | int      | no       | usefult to track an order path on your graph      |
+| color          | string   | no       | label color (hex color string)                    |
+| dashed         | bool     | no       | if true the connection line will be dashed        |
+| dir            | string   | no       | arrows direction (forward, back, both, none)      |
+| highlight      | bool     | no       | if true makes the arrow thicker                   |
 
-A `connection` has the following properties:
 
-```go
-type Connection struct {
-  Origin string `yaml:"origin"`
-  Targets []struct {
-    ID          string `yaml:"id"`
-    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"`
-}
+Sample YAML file [examples/connections.yml](./examples/connections.yml).
+
+```bash
+draft examples/connections.yml | dot -Gdpi=110 -Tpng > examples/connections.png
 ```
 
+![Connections](examples/connections.png)
+
+
 [![Twitter](https://img.shields.io/twitter/url?style=social&url=https%3A%2F%2Fgithub.com%2Flucasepe%2Fdraft)](https://twitter.com/intent/tweet?text=Wow:&url=https%3A%2F%2Fgithub.com%2Flucasepe%2Fdraft)
 
 ---

assets/aws.csv

@@ -0,0 +1,19 @@
+bst,EBS
+cdn,Cloudfront
+cli,CLI App
+dns,Route 53
+doc,DynamoDB
+fst,EFS
+fun,Lambda
+gtw,API Gateway
+kub,EKS
+lba,ELB
+mem,ElastiCache
+msg,SNS
+ost,S3
+que,SQS
+rdb,RDS
+ser,μService
+usr,User
+waf,WAF
+web,Browser

assets/azure.csv

@@ -0,0 +1,18 @@
+bst,Disk Storage
+cdn,CDN
+cli,CLI App
+dns,DNS
+doc,Cosmos DB
+fst,File Storage
+fun,Functions
+gtw,API Management
+kub,AKS
+lba,Load Balancer
+mem,Redis Caches
+msg,Notification Hubs
+ost,Blob Storage
+rdb,SQL Database
+ser,μService
+usr,User
+waf,Firewall
+web,Browser

assets/default.csv

@@ -0,0 +1,19 @@
+bst,Block Store
+cdn,CDN
+cli,CLI App
+dns,DNS
+doc,NoSQL DB
+fst,File Store
+fun,Function
+gtw,Gateway
+kub,Containers Engine
+lba,Load Balancer
+mem,Cache
+msg,Pub/Sub
+ost,Object Store
+que,Queue
+rdb,SQL DB
+ser,μService
+usr,User
+waf,Firewall
+web,Browser

assets/google.csv

@@ -0,0 +1,18 @@
+bst,Persistent Disk
+cdn,CDN
+cli,CLI App
+dns,DNS
+doc,Datastore
+fst,Filestore
+fun,Functions
+gtw,Endpoints
+kub,Kubernetes Engine
+lba,Load Balancing
+mem,Memorystore
+msg,Pub/Sub
+ost,Storage
+rdb,SQL
+ser,μService
+usr,User
+waf,Armor
+web,Browser