Mermaid

#Mermaid

Amb Mermaid pots crear diagrames com diagrames de flux, diagrames de seqüència, diagrames de Gantt i diagrames de classes, i integrar-los fàcilment en llocs web, blogs i documentació.

A més, Mermaid s’integra de manera nativa amb github i gitlab, cosa que permet des del mateix lloc del nostre projecte visualitzar els diagrames directament al navegador en accedir a les pàgines de Markdown.

#Entorn de treball

Tens moltes opcions per treballar amb Mermaid.

#Live editor

https://mermaid.live. Open-source editor with an enhanced interface and improved functionality.

#VS Code

Transform your diagramming experience in VS Code with powerful new features including AI Diagramming and Error Highlighting!

Arranca Vscode

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

• Ctrl + Alt + S per obrir el menú “Settings”
• Selecciona Plugins
• Cerca “Mermaid” i instal·la el “plugin”

Crea un fitxer data.md:

```mermaid

classDiagram

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

Pots veure que és una definició molt senzilla d’una classe.

Si obres la finestra Preview pots veure el diagrama de classes dibuixat:

#Diagrama de classes

En aquest enllaç tens la informació corresponent: Class Diagram

A continuació tens un exemple de diagrama de classes:

I com es visualitza a Idea

GUI for editing Mermaid Class Diagrams. Design and refine class diagrams intuitively using your mouse—with all changes automatically reflected in your syntax!

#Git

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

Aquí tens un exemple: