@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
| ## editor | |
| https://www.planttext.com/ | |
| ## reference | |
| https://deepu.js.org/svg-seq-diagram/Reference_Guide.pdf | |
| ## Diagrams | |
| - Several Diagrams | |
| - https://plantuml.com/ | |
| - https://real-world-plantuml.com/ | |
| - https://github.com/future-architect/puml-themes | |
| - 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://stackoverflow.com/questions/11557426/how-to-align-blocks-in-plantuml-class-diagrams | |
| - https://crashedmind.github.io/PlantUMLHitchhikersGuide/layout/layout.html | |
| - https://crashedmind.github.io/PlantUMLHitchhikersGuide/PlantUMLSpriteLibraries/plantuml_sprites.html | |
| - https://github.com/yfuruyama/real-world-plantuml | |
| - https://github.com/plantuml-stdlib/C4-PlantUML | |
| - https://github.com/robbell/plantuml-c4 | |
| - https://github.com/future-architect/puml-themes | |
| - https://github.com/topics/plantuml | |
| - https://github.com/usil/developer-center-docs | |
| ## custom | |
| - https://github.com/usil/help-center-docs/blob/master/docs/erp-oscorp/some-feature-template/Functional.doc.md | |
| - https://github.com/usil/help-center-docs/blob/master/docs/erp-oscorp/some-feature-template/Technical.doc.md | |
| - https://github.com/usil/developer-center-docs | |
| ## aws | |
| - https://github.com/awslabs/aws-icons-for-plantuml/tree/main/dist/Compute | |
| - https://blog.wilcoxd.com/2022/01/27/Creating-Diagrams-appropriate-to-contexts-with-PlantUML/ | |
| - https://crashedmind.github.io/PlantUMLHitchhikersGuide/aws/aws.html#create-real-life-aws-diagrams | |
| - https://se-education.org/guides/tutorials/plantUml.html | |
| ## extend | |
| - https://github.com/plantuml-stdlib/Azure-PlantUML | |
| - https://github.com/awslabs/aws-icons-for-plantuml | |
| - https://github.com/plantuml-stdlib/C4-PlantUML | |
| ## alternatives | |
| https://github.com/mingrammer/diagrams | |
| ## similars | |
| https://structurizr.com/dsl | |
| ## graphviz | |
| https://graphviz.org/Gallery/neato/process.html |
@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
@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
@startuml
rectangle api
storage web_spa
database database
web_spa -right-> api
api -right-> database
@enduml
| skinparam nodesep 10 | |
| skinparam ranksep 20 | |
| https://forum.plantuml.net/8774/how-to-reduce-space-between-rectangles |
@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