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.