Vés al contingut principal
LibraTool logoLibraTool

Editor de diagrames Mermaid de franc

Escriu diagrames de flux, diagrames de seqüència, diagrames de Gantt i més en sintaxi Mermaid amb previsualització en viu. Exporta com a SVG o PNG. S'executa completament al teu navegador.

💡 Escriu diagrames amb sintaxi Mermaid — diagrames de flux, de seqüència, de Gantt, de classes i més — i exporta'ls en SVG o PNG. Tot funciona al navegador: el text del diagrama no es puja mai i el motor de renderitzat de Mermaid se serveix des d'aquest lloc, no des d'un CDN extern.

Usos habituals

  • Fes un diagrama de fluxCrea un diagrama de flux des de text i exporta'l com a imatge.
  • Dibuixa un diagrama de seqüènciaDiagramar com els sistemes o les persones interactuen al llarg del temps.
  • Afegeix un diagrama a READMECrea diagrames que GitHub renderitza de manera nativa al teu README.
  • Fes un diagrama de GanttDefineix la línia de temps del projecte com un diagrama de Gantt des de text.
  • Crea un diagrama de classeDiagrama de les classes i les seves relacions per al disseny de programari.

Com funciona

Mermaid et permet escriure diagrames com a text i fer-los render automàticament — excelent per mantenir diagrames en control de versions. Això és un editor en viu que renderitza mentre escribiu.

  1. 1
    Es carrega el motor Mermaid
    La biblioteca Mermaid es carrega des de LibraTool la primera vegada que fas servir l'eina i després el navegador la desa a la memòria cau.
  2. 2
    Escribiu el codi del diagrama
    Diagrames de flux, diagrames de seqüències, gràfics de Gantt, diagrames de classes, gràfics de pastís i més — utilitzant la sintaxi de text de Mermaid.
  3. 3
    Es renderitza en viu
    El vostre codi s'analitza i es renderitza a un SVG al vostre navegador mentre escribiu, amb temes clars i foscos.
  4. 4
    Exporteu SVG o PNG
    Descarregueu el diagrama com a SVG escalable o un PNG 2× per deixar a docs, diapositives o README.

El vostre codi de diagrama — que pot descriure sistemes interns — es renderitza totalment al vostre navegador i mai no es carrega.

Eines relacionades

📝

Editor de Markdown

Escriu i previsualitza Markdown en temps real. Admet encapçalaments, negreta, cursiva, blocs de codi, taules i llistes.

Prova-ho
🟦

Generador de CSS Grid

Dissenya visualment una CSS grid — pistes, unitats i buits — i copia el CSS i HTML generat.

Prova-ho
🌳

Generador d'arbre ASCII

Converteix una llista amb sagnat en un arbre de carpetes net (├── └──) per a READMEs i documentació. Sortida Unicode o ASCII simple. S'executa completament al teu navegador.

Prova-ho

Preguntes freqüents