Herramientas de diagramación: PlantUML, GraphViz, Mermaid, BPMN y más

En este blog post vamos a hablar sobre varias herramientas de diagramación que pueden ser útiles para diferentes propósitos. Cada una de estas herramientas tiene su propia sintaxis y características únicas que las hacen útiles para diferentes tipos de diagramas.

PlantUML:

Es una herramienta para crear diagramas UML utilizando un lenguaje de marcado de texto. Puede utilizarse para crear diagramas de clases, secuencia, actividad, caso de uso, entre otros.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@startuml
class Car {
  + int wheels
  + int doors
  + String color
  + drive()
  + park()
}

class SUV {
  + int wheels
  + int doors
  + String color
  + int groundClearance
  + drive()
  + park()
}

Car <|-- SUV
@enduml

GraphViz:

es una herramienta de visualización de gráficos que utiliza lenguaje de descripción de gráficos DOT. Puede utilizarse para crear diagramas de flujo, diagramas de red, diagramas de árbol, entre otros.

1
2
3
4
5
6
7
8
9
10
11
digraph example {
  start [shape=Mdiamond,label="Inicio"]
  end [shape=Msquare,label="Fin"]
  proceso1 [shape=rectangle,label="Proceso 1"]
  proceso2 [shape=rectangle,label="Proceso 2"]
  proceso3 [shape=rectangle,label="Proceso 3"]
  start -> proceso1
  proceso1 -> proceso2
  proceso2 -> proceso3
  proceso3 -> end
}

Mermaid:

Es una herramienta para crear diagramas de flujo, diagramas de secuencia, diagramas de clase, entre otros. Utiliza una sintaxis de marcado de texto similar a PlantUML.

1
2
3
4
5
graph TD;
  A-->B;
  A-->C;
  B-->D;
  C-->D;

BPMN:

Es un estándar para modelar procesos de negocio utilizando un lenguaje gráfico. Puede utilizarse para crear diagramas de flujo de trabajo, diagramas de proceso, entre otros.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<?xml version="1.0" encoding="UTF-8"?>
<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL"
             xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
             xmlns:activiti="http://activiti.org/bpmn"
             targetNamespace="http://activiti.org/bpmn20">
  <process id="loanProcess" name="Solicitud de préstamo" isExecutable="true">
    <startEvent id="startEvent" name="Inicio" />
    <userTask id="task1" name="Solicitud de préstamo" activiti:candidateGroups="loanDepartment" />
    <exclusiveGateway id="exclusiveGateway1" name="Aprobado?" />
    <userTask id="task2" name="Evaluar garantía" activiti:candidateGroups="underwriter" />
    <exclusiveGateway id="exclusiveGateway2" name="Aprobado?" />
    <userTask id="task3" name="Aprobar préstamo" activiti:candidateGroups="loanDepartment" />
    <endEvent id="endEvent" name="Fin" />
    <sequenceFlow id="flow1" sourceRef="startEvent" targetRef="task1" />
    <sequenceFlow id="flow2" sourceRef="task1" targetRef="exclusiveGateway1" />
    <sequenceFlow id="flow3" sourceRef="exclusiveGateway1" targetRef="task2">
      <conditionExpression xsi:type="tFormalExpression">${approved == 'no'}</conditionExpression>
    </sequenceFlow>
    <sequenceFlow id="flow4" sourceRef="exclusiveGateway1" targetRef="task3">
      <conditionExpression xsi:type="tFormalExpression">${approved == 'yes'}</conditionExpression>
    </sequenceFlow>
    <sequenceFlow id="flow5" sourceRef="task2" targetRef="exclusiveGateway2" />
    <sequenceFlow id="flow6" sourceRef="exclusiveGateway2" targetRef="task3">
      <conditionExpression xsi:type="tFormalExpression">${approved == 'yes'}</conditionExpression>
    </sequenceFlow>
    <sequenceFlow id="flow7" sourceRef="task3" targetRef="endEvent" />
  </process>
</definitions>

Structurizr:

Es una herramienta para crear diagramas de arquitectura de software. Permite modelar sistemas, componentes, contenedores, entre otros.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Workspace workspace = new Workspace("Structurizr Example", "An example of how to use Structurizr.");
Model model = workspace.getModel();

SoftwareSystem mySystem = model.addSoftwareSystem("My System", "Description");
Person user = model.addPerson("User", "Description");
user.uses(mySystem, "Uses");

ViewSet views = workspace.getViews();
SystemContextView contextView = views.createSystemContextView(mySystem, "SystemContext", "An example System Context diagram.");
contextView.addAllSoftwareSystems();
contextView.addAllPeople();

Styles styles = views.getConfiguration().getStyles();
styles.addElementStyle(Tags.SOFTWARE_SYSTEM).background("#1168bd").color("#ffffff");
styles.addElementStyle(Tags.PERSON).background("#08427b").color("#ffffff").shape(Shape.Person);

PlantUMLWriter plantUMLWriter = new PlantUMLWriter();
System.out.println(plantUMLWriter.toString(contextView));

Excalidraw:

Es una herramienta de dibujo en línea que permite crear diagramas de flujo, diagramas de red, diagramas de Venn, entre otros.

1
2
3
4
5
6
7
Excalidraw
-----------
        /~~~~~\
       |       |
       | hello |
       |       |
        \_____/

Nomnoml:

Es una herramienta para crear diagramas de clases, diagramas de secuencia, diagramas de flujo, entre otros. Utiliza una sintaxis de marcado de texto similar a PlantUML.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#direction: down
[<frame>Hotel|
  [<abstract>Customer]
  [<abstract>Employee]
  [Payment|
    <billing>Invoice
    PaymentMethod|
    CreditCard
    Check
  ]
  [Booking|
    <option>Reservation
    Cancellation
  ]
]

Svgbob:

Es una herramienta para crear diagramas ASCII que pueden ser renderizados como gráficos SVG. Puede utilizarse para crear diagramas de flujo, diagramas de red, entre otros.

1
2
3
4
5
6
7
+----------+      +----------+
|   User   |      | Database |
+----------+      +----------+
      |                  |
      |      +------------------+
      +----> |   Application   |
             +------------------+

SeqDiag:

Es una herramienta para crear diagramas de secuencia utilizando una sintaxis de marcado de texto. Puede utilizarse para modelar interacciones entre objetos en un sistema.

1
2
3
4
5
6
7
8
seqdiag {
  browser -> webserver [label = "GET /index.html"];
  browser <-- webserver [label = "HTML content"];
  browser -> webserver [label = "POST /login.cgi"];
  browser <-- webserver [label = "302 Found"];
  browser -> webserver [label = "GET /welcome.cgi"];
  browser <-- webserver [label = "Welcome page"];
}

ActDiag:

Es una herramienta para crear diagramas de actividad utilizando una sintaxis de marcado de texto. Puede utilizarse para modelar procesos de negocio y flujo de trabajo.

1
2
3
4
5
actdiag {
  A -> B -> C;
  D -> E -> F;
  G -> H;
}

RackDiag:

Es una herramienta para crear diagramas de rack y servidores utilizando una sintaxis de marcado de texto.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
rackdiag {
  rack_layout;
  0U; 1U; 2U; 3U; 4U; 5U; 6U; 7U; 8U; 9U; 10U; 11U; 12U; 13U; 14U; 15U; 16U; 17U; 18U; 19U; 20U;
  0U [label="Top of Rack"];
  1U [label="Server 1"];
  2U [label="Server 2"];
  3U [label="Server 3"];
  4U [label="Switch"];
  5U [label="Server 4"];
  6U [label="Server 5"];
  7U [label="Server 6"];
  8U [label="Switch"];
  9U [label="Server 7"];
  10U [label="Server 8"];
  11U [label="Server 9"];
  12U [label="Switch"];
  13U [label="Server 10"];
  14U [label="Server 11"];
  15U [label="Server 12"];
  16U [label="Switch"];
  17U [label="Server 13"];
  18U [label="Server 14"];
  19U [label="Server 15"];
  20U [label="Bottom of Rack"];
  0U -> 20U;
  1U -> 4U;
  2U -> 4U;
  3U -> 4U;
  5U -> 8U;
  6U -> 8U;
  7U -> 8U;
  9U -> 12U;
  10U -> 12U;
  11U -> 12U;
  13U -> 16U;
  14U -> 16U;
  15U -> 16U;
  17U -> 20U;
  18U -> 20U;
  19U -> 20U;
}

Bytefield:

Es una herramienta para crear diagramas de campos de bits utilizando una sintaxis de marcado de texto.

1
2
3
4
5
6
[ Ethernet Packet ]
  Destination Address: 6 bytes
  Source Address:      6 bytes
  Type:                2 bytes
  Data:                variable
  CRC:                 4 bytes

NwDiag:

Es una herramienta para crear diagramas de red utilizando una sintaxis de marcado de texto. Puede utilizarse para modelar redes de computadoras y topologías de red.

1
2
3
4
5
6
7
8
9
10
11
12
[Computer] 
  {
    internet : "10.0.0.1"
    eth0 : "192.168.0.2"
  }

[Server Web]
  {
    eth0 : "192.168.0.1"
  }

Computer -- Server Web : HTTP

PacketDiag:

Es una herramienta para crear diagramas de paquetes de red utilizando una sintaxis de marcado de texto.

1
2
3
4
5
6
digraph {
    node [shape=plaintext, fontname=Helvetica, fontsize=12];

    Internet -> Server [label="Request"];
    Server -> Internet [label="Response"];
}

C4 with PlantUML:

Es una extensión de PlantUML que permite crear diagramas de arquitectura de software utilizando la notación C4.

Erd:

Es una herramienta para crear diagramas de modelo de entidad-relación utilizando una sintaxis de marcado de texto.

1
2
3
4
5
6
digraph G {
    rankdir=LR;
    node [shape=plaintext];

    "order" -> "customer";
}

Ditaa:

Es una herramienta para crear diagramas de flujo utilizando una sintaxis de marcado de texto.

1
2
3
+---------+
|  Hello  |
+---------+

Pikchr:

Es una herramienta para crear diagramas utilizando una sintaxis de marcado de texto similar a Diagrama de flujo.

1
2
3
4
5
6
7
8
9
10
11
left
  box wid 3 ht 20
  box wid 3 ht 20 at 5 0
  arrow from last box to 2nd box
  arrow from last box down 10
  box wid 3 ht 20 at 10 20
  arrow from 2nd box down 10
  box wid 3 ht 20 at 15 30
  arrow from last box to 3rd box
  arrow from last box down 10
  box wid 3 ht 20 at 20 20

UMlet

UMlet es una herramienta de diagramación de UML gratuita y de código abierto que permite crear diagramas de clases, de secuencia, de actividad y más. Es fácil de usar y permite exportar los diagramas a varios formatos, como SVG y PDF. 

@startuml
class Person {
    - name : String
    - age : int
}

Person -> Address
@enduml