No empieces desde un editor en blanco. mermaid.design incluye una galería integrada de plantillas de diagramas listas para usar: abre una, ajusta el código y hazla tuya.
Abrir la galería
Haz clic en Plantillas en la barra de navegación para abrir la galería del modo de renderizado actual:
/templates: plantillas renderizadas con el motor oficial (SVG) y tu tema activo/ascii/templates: las mismas plantillas renderizadas como arte ASCII
Cada tarjeta de la galería se renderiza en vivo con tu tema actual, así que lo que ves es exactamente lo que obtienes de vuelta en el editor.
Encontrar una plantilla
La galería incluye diagramas de flujo, diagramas de secuencia, diagramas de clases, diagramas de estados, diagramas ER, diagramas de Gantt, gráficos circulares, grafos de Git, mapas mentales, recorridos de usuario y más.
Usa los filtros de la parte superior para acotar la lista por tipo de diagrama. Si una plantilla no es compatible con el modo de renderizado actual (por ejemplo, algunos tipos de diagramas aún no se pueden renderizar como ASCII), se oculta automáticamente y un aviso muestra cuántas plantillas se filtraron.
Aplicar una plantilla
- Haz clic en una tarjeta de plantilla.
- Confirma el diálogo de sobrescritura: aplicar una plantilla reemplaza el código que hay actualmente en el editor. Esta acción no se puede deshacer.
- Volverás al editor con el código de la plantilla cargado y renderizado.
Desde la galería, haz clic en Volver al editor en la barra de navegación para regresar al editor sin aplicar nada.
Consejos
- Aplica primero una plantilla y luego cambia el tema: la plantilla adopta tus variables de tema al instante.
- Las plantillas son una gran forma de aprender la sintaxis Mermaid: abre una, edita el código y observa cómo cambia la vista previa.