jrichardsz/_plantuml snippets.md

editor

https://www.planttext.com/

reference

https://deepu.js.org/svg-seq-diagram/Reference_Guide.pdf

Diagrams

Several Diagrams
Web flow / Site Map
- https://plantuml.com/wbs-diagram
Artifacts Dependency or Relationship
- https://plantuml.com/mindmap-diagram
Flow Chart / Activity Diagram / Decision flow
- https://plantuml.com/activity-diagram-beta
Sequence Diagram
- https://plantuml.com/sequence-diagram
Deployment Diagram
- https://plantuml.com/deployment-diagram
Entity Relationship diagram (IE/ER) Database
- https://plantuml.com/ie-diagram
Colors
- https://plantuml.com/color
- https://github.com/qywx/PlantUML-colors/blob/master/plantuml-colors-notes.puml
Legend
- https://stackoverflow.com/questions/30999290/how-to-generate-a-legend-with-colors-in-plantuml
Advanced
https://github.com/usil/developer-center-docs

custom

aws

extend

alternatives

https://github.com/mingrammer/diagrams

similars

https://structurizr.com/dsl

graphviz

https://graphviz.org/Gallery/neato/process.html

@startuml

skin rose
title Flujo: 832651cfd080

start

:User an admin creates a new employee in RRHH_System; 
note right: This is a note to the right

:New user tries \n to login; 

if (password is ok?) then (yes)
  :User can check register their \n holidays;
else (no)
  :Raise a ticket to help desk;
  stop
endif

stop

@enduml

@startuml

skin rose
title Flow: 242b67ddb00c

actor       Actor       as user
participant rrhh_sys as "RRHH System"
participant event_middleware as "Event Middleware"
participant sap as "SAP Api"
participant erp_travel as "Travel ERP"

user -> rrhh_sys : an employee is created (ui)\n form:c1997141fbe7
rrhh_sys -> event_middleware : employee data(json) is sent (async)\n hook: 1f902a7afe8a
event_middleware -> sap :  send (async) the received data (employee)\n api-endpoint: 582c148de53a
event_middleware -> erp_travel :  send (async) the received data (employee)\napi-endpoint: db082f3c2770

@enduml

https://crashedmind.github.io/PlantUMLHitchhikersGuide/PlantUMLSpriteLibraries/plantuml_sprites.html

https://plantuml.com/openiconic

https://plantuml.com/deployment-diagram

https://plantuml.com/stdlib

@startuml
package "Cloud"{
  package "ecomm VPC"{
    package "zone us-east-1"{
      package "Presentation Layer: AWS EC2" as presentation{
        [ecommerce-web]
        [delivery-dashboard-web]
      }
      package "Business Logic Layer: AWS EC2" as bussiness{
        [employee-api]
        [payment-api]
        [accounting-api]
      }

      package "Data Storage Layer: AWS RDS" as data{
        [Mysql 5.7]
        [AWS S3]
      }

      package "Shared/Common Services: AWS RDS" as common{
        [iam]
        [aws-cloud-watch]
      }
    }
  }
}

left to right direction
@enduml

@startuml
left to right direction

rectangle Plan #ecb068
rectangle Code #ecb068
rectangle Build #49bad8
rectangle test_deploy as "Test\nDeployment" #49bad8
rectangle manual_test as "Manual\nTesting" #ecb068
rectangle approval_required as "Approval\nrequired" #ecb068
rectangle prod_deploy as "Prod\nDeployment" #49bad8

Plan   --> Code
Code  --> Build
Build --> test_deploy
test_deploy --> manual_test
manual_test --> approval_required
approval_required --> prod_deploy

legend
    |Color| Type |
    |<#ecb068>| human step|
    |<#49bad8>| automated step|
endlegend


@enduml

@startuml
' hide the spot
hide circle

' avoid problems with angled crows feet
skinparam linetype ortho

entity "Complex Table" as e01 {
  e1_id : number
  --
  name : text , lorepsum ipsom
}

entity "Entity02" as e02 {
  e2_id : number
  --
  e1_id : number , lorepsum ipsom
}

entity "Entity03" as e03 {
  e3_id : number
  --
  e1_id : number, lorepsum ipsom
}

class "Simple Table" {
  c1 : number, lorepsum ipsom
  --
  c2 : date, lorepsum ipsom
}

e01 ||..o{ e02
e01 |o..o{ e03
@enduml

https://www.augmentedmind.de/2021/01/31/plantuml-advanced-features/

@startuml

' Define the procedure
!unquoted procedure $connected_network($alias, $n1, $n2="", $n3="", $n4="")
  storage $alias {
    circle $n1
    !if ($n2 != "")
        circle $n2
        $n1 -- $n2
    !endif
    !if ($n3 != "")
        circle $n3
        $n1 -- $n3
        $n2 -[norank]- $n3
    !endif
    !if ($n4 != "")
        circle $n4
        $n1 -[norank]- $n4
        $n2 -[norank]- $n4
        $n3 -[norank]- $n4
    !endif
  }
!endprocedure

' Call the procedure
$connected_network(myalias, 1, 2, 3, 4)
@enduml

@startuml
left to right direction 

rectangle interface{
    () Mechanical
    () Hydraulical
    () Electrical
}

package Machine{
    Mechanical )-- [Turning Disc]  
    Mechanical )-- [Vent]
    Electrical )--[Baler_ECU]
    Hydraulical )--[Arm] 
}

package Tractor{
    [Engine] -- Mechanical
    [Hydraulics] -- Hydraulical
    [Tractor_ECU] -- Electrical
}

interface -[hidden]- Machine
Tractor -[hidden]- interface
@enduml

https://forum.plantuml.net/7619/position-and-size-alignment-of-packages-component-diagram

Goal

Result

@startuml

skinparam nodesep 10
skinparam ranksep 20
scale 1.0

package platform_layer as "Platform Services" {

rectangle authentication
rectangle authorization
rectangle configuration
rectangle loggers
rectangle caching
rectangle etc as "ftp, cdn, etc"

authentication -down[hidden]-> authorization
authorization -down[hidden]-> configuration
configuration -down[hidden]-> loggers
loggers -down[hidden]-> caching
caching -down[hidden]-> etc

}

package layers as "Layers" {

  package client_layer as "Clients" {
    rectangle mobile 
    rectangle laptop
    rectangle dashboards
    rectangle iot
    
    mobile -right[hidden]-> laptop
  }
  
  package frontend_layer as "Presentation Layer" {
    rectangle web1 
    rectangle web2
    rectangle web3 
    rectangle web4  
    web1 -right[hidden]-> web2
    web2 -right[hidden]-> web3
    web3 -right[hidden]-> web4
  }
  
  package business_layer as "Business Layer" {
    rectangle api1 
    rectangle api2
    rectangle api3 
    rectangle api4  
    api1 -right[hidden]-> api2
    api2 -right[hidden]-> api3
    api3 -right[hidden]-> api4
  }
  
  package data_layer as "Data Layer" {
    rectangle database1 
    rectangle database2
    rectangle datasource3 
    database1 -right[hidden]-> database2
    database2 -right[hidden]-> datasource3
  }
  
  package third_party_layer as "Third Party Services" {
    rectangle service1 
    rectangle service2
    rectangle service3 
    service1 -right[hidden]-> service2
    service2 -right[hidden]-> service3
  }  

}

client_layer -down[hidden]-> frontend_layer
frontend_layer -down[hidden]-> business_layer
business_layer -down[hidden]-> data_layer
data_layer -down[hidden]-> third_party_layer

layers -left[hidden]-> platform_layer


@enduml

@startuml
digraph unix {
nodesep=0.486111;
ranksep=0.833333;
remincross=true;
searchsize=500;
sh0007 [shape=rect,label="Left",width=0.888889,height=0.661241,color="#000007"];
sh0005 [shape=rect,label="Up",width=0.791667,height=0.661241,color="#000005"];
sh0007->sh0004[arrowtail=empty,arrowhead=none,dir=back,arrowsize=0.5,minlen=0,color="#000011"];
sh0004->sh0008[arrowsize=0.5,minlen=0,color="#000015"];
sh0004 [shape=rect,label="A",width=0.680556,height=0.661241,color="#000004"];
sh0006 [shape=rect,label="Down",width=1.041667,height=0.661241,color="#000006"];
sh0008 [shape=rect,label="Right",width=1.013889,height=0.661241,color="#000008"];
sh0005->sh0004[arrowtail=empty,arrowhead=none,dir=back,arrowsize=0.5,minlen=1,color="#000009"];
sh0004->sh0006[arrowsize=0.5,minlen=1,color="#00000D"];
}
@enduml

@startuml
left to right direction

rectangle hubspot
rectangle  eventhos
rectangle integrator
hubspot   --> eventhos
eventhos  --> integrator
eventhos  --> system1
eventhos  --> system2
eventhos  --> system3
@enduml

https://crashedmind.github.io/PlantUMLHitchhikersGuide/layout/layout.html

@startuml
rectangle api
storage web_spa
database database
web_spa -right-> api
api -right-> database
@enduml

myml.vscode-markdown-plantuml-preview

download the jar https://plantuml.com/download#google_vignette
set the full location here

then add plantuml diagrams in your markdown


```plantuml
@startuml
Bob -> Alice : hello
@enduml
```

- preview the markdown

and save the image

@startuml

title Integracion point to point with http
artifact google_drive
storage one_drive as "one_drive_api"

google_drive -right-> one_drive
@enduml

@startuml

title Integracion point to point with db
artifact google_drive
database one_drive as "one_drive_db"

google_drive <-right-> one_drive
@enduml

@startuml

title Integracion etl\nDatabase Links

control etl as "ETL" 
database google_drive_db
database one_drive_db

google_drive_db <-right-> etl  
etl <-right-> one_drive_db
@enduml

@startuml
skinparam backgroundcolor transparent

rectangle client as "browser / mobil"
component third_party as "third party"
component internal_api_1 as "internal-api-1"
hexagon dns
component aws_lb as "aws load balancer"
component web1
component web2
component internal_api_2 as "internal-api-2"
component internal_api_3 as "internal-api-3"

client -- dns
internal_api_1 -- dns
third_party -- dns
dns -- aws_lb
aws_lb -- web1
aws_lb -- web2
aws_lb -- internal_api_2
aws_lb -- internal_api_3
@enduml

@startuml
left to right direction 

package middleware{
    database database
    [Mechanical] -left-> database
}

package target{
    Mechanical )-- [Turning Disc]   
}

package sources{
    [Engine] -- Mechanical
    [Hydraulics] -- Mechanical
}

middleware -[hidden]- target
sources -[hidden]- middleware
@enduml

@startmindmap
* Debian
** Ubuntu
*** Linux Mint
*** Kubuntu
*** Lubuntu
*** KDE Neon
** LMDE
** SolydXK
** SteamOS
** Raspbian with a very long name
*** <s>Raspmbc</s> => OSMC
*** <s>Raspyfi</s> => Volumio
@endmindmap

More:

https://plantuml.com/mindmap-diagram

	skinparam nodesep 10
	skinparam ranksep 20

	https://forum.plantuml.net/8774/how-to-reduce-space-between-rectangles