Mermaid es una herramienta para crear diagramas mediante definiciones que se renderizan mediante scripts.

Mermaid

Con Mermaid puedes crear diagramas como diagramas de flujo, diagramas de secuencia, diagramas de Gantt y diagramas de clases, e integrarlos fácilmente en sitios web, blogs y documentación.

Además, Mermaid se integra de manera nativa con github y gitlab, lo que permite desde el propio site de nuestro proyecto visualizar los diagramas directamente en el navegador al acceder a las páginas de Markdown.

Entorno de trabajo

Arranca VS Code

Instal.la la extensión Markdown Preview Mermaid Support.

  • Ctrl + Alt + S para abrir el menú "Settings"
  • Selecciona Plugins
  • Busca "Mermaid" e instala el "plugin":

Crea una fichero data.md:

```mermaid
classDiagram

    class Person {
        id: Long
        name: String
        married: Boolean
    }

Puedes ver que es una definición muy sencilla de una clase.

Si abres la ventana Preview puedes ver el diagrama de clases dibujado:

classDiagram
direction LR

class Person {
  id: Long
  name: String
  married: Boolean
}

Diagrama de classes

En este enlace tienes la información correspondiente: Class Diagram

A continuación tienes un ejemplo de diagrama de classes:

classDiagram
    direction LR

    class Client {
        id: Long
        name: String
    }

    class Product {
        id: Long
        name: String
        price: Double
    }

    class OrderItem {
        quantity: Int
    }

    OrderItem --> Product

    class Order {
        id: Long
        /total: Long
    }

    Order --> Client
    Order --> "1..*" OrderItem

I como se visualiza en Idea:

Git

En aquest enllaç tens explicat com crear gràfics git: Gitgraph Diagrams

Aquí tens un exemple:

gitGraph
   commit
   commit
   branch develop
   checkout develop
   commit
   commit
   checkout main
   merge develop
   commit
   commit

A Git i Gitlab tens molts exemples amb explicacions.

TODO