{"id":55528,"date":"2026-02-07T15:19:17","date_gmt":"2026-02-07T14:19:17","guid":{"rendered":"https:\/\/www.carolinacampalans.com\/?post_type=epkb_post_type_1&p=55528"},"modified":"2026-05-09T12:49:08","modified_gmt":"2026-05-09T10:49:08","slug":"mermaid-js","status":"publish","type":"epkb_post_type_1","link":"https:\/\/www.carolinacampalans.com\/?epkb_post_type_1=mermaid-js","title":{"rendered":"Mermaid.js"},"content":{"rendered":"
<\/div>

Una herramienta basada en JavaScript que permite generar diagramas y visualizaciones utilizando texto inspirado en <\/span>Markdown.<\/span><\/p>\n<\/div>

\n<\/div><\/div><\/div><\/div><\/div>

Descripci\u00f3n<\/h2><\/div>

Con Mermaid escribimos c\u00f3digo simple y la herramienta se encarga de renderizar el dibujo autom\u00e1ticamente, sin necesidad de herramientas de dise\u00f1o gr\u00e1fico pesadas.<\/p>\n<\/div>

La gran ventaja de Mermaid es que trata a los diagramas como <\/span>c\u00f3digo<\/span>.<\/span> Esto ofrece importantes ventajas.<\/p>\n

<\/span>Control de versiones<\/span><\/h4>\n

Podemos comprobar qu\u00e9 cambi\u00f3 en un diagrama usando Git, igual que con el c\u00f3digo fuente.<\/p>\n

<\/span>Rapidez<\/span><\/h4>\n

Si se tiene cierta pr\u00e1ctica con JavaScript, resultar\u00e1 m\u00e1s r\u00e1pido escribir un par de sencillas l\u00edneas que alinear flechas manualmente.<\/p>\n

<\/span>Integraci\u00f3n<\/span><\/span><\/h4>\n

Viene integrado por defecto en plataformas como <\/span>Git<\/span>Hub,<\/span> GitLab,<\/span> Notion<\/span> o<\/span> Obsidian<\/span>.<\/span><\/p>\n

<\/div>\n<\/div>

Mermaid es extremadamente vers\u00e1til.<\/span> Entre la gran variedad de diagramas que nos permite quedar, los m\u00e1s comunes son:<\/p>\n