DotMDUn visor de Markdown para Macque dibuja diagramas Mermaid.
Escribe un diagrama como texto en un bloque de código marcado como mermaid y DotMD lo dibuja en la página. Nada sale de tu Mac: funciona sin conexión, en el tema claro o el oscuro.
macOS 14 o posterior. Leer es gratis; editar y revisar se pagan una sola vez.
Respuesta rápida
DotMD es un visor de Markdown para Mac con soporte de Mermaid. Un bloque de código marcado como mermaid se dibuja como diagrama de flujo, de secuencia, de clases, de estados o entidad-relación, como diagrama de Gantt, gráfico circular, mapa mental, línea de tiempo o grafo de git, sin conexión y con los colores de tu tema. Ver es gratis; escribir con vista previa en vivo viene con DotMD Editor.
¿Qué diagramas Mermaid dibuja DotMD?
DotMD lleva Mermaid 10.9 integrado. Dibuja estos tipos de diagrama, y el editor tiene una plantilla lista para cada uno:
- Diagramas de flujo y de estados: pasos, decisiones y transiciones.
- Diagramas de secuencia: quién envía qué a quién, en orden.
- Diagramas de clases y de entidad-relación: tipos, tablas y cómo se relacionan.
- Diagramas de Gantt y líneas de tiempo: planes y sucesos a lo largo del tiempo.
- Gráficos circulares, mapas mentales y grafos de git.
Un diagrama sigue siendo texto en tu archivo .md, así que es fácil de cambiar, y cada cambio aparece en el historial de versiones.
Cómo ver Mermaid en un archivo Markdown en el Mac
Un bloque de código marcado como mermaid se convierte en un diagrama en la página, en vez de mostrar su código.
-
Abre el archivo
Pulsa ⌘O y elige el archivo .md o su carpeta, o arrástralo sobre DotMD. Cada diagrama se dibuja al abrir la página.
-
Míralo de cerca
Haz clic en un diagrama para verlo en grande sobre la página. Pellizca para ampliar hasta 8×, arrastra para moverlo y pulsa Esc para volver.
-
Acorde al tema
Los diagramas siguen a la página: se dibujan con colores claros u oscuros según el tema que elijas en el menú Aa.
Escribir Mermaid con vista previa en vivo
Editar forma parte de DotMD Editor. Pulsa Edit o ⌘E y activa Preview (⌥⌘E): el diagrama se redibuja junto al texto mientras escribes, y un clic en él salta a su código.
Insert → Diagram coloca en tu archivo un ejemplo funcional de cualquiera de los diez tipos, listo para editar.
Mermaid en Quick Look, PDF y HTML
Pulsa la barra espaciadora sobre un archivo .md en Finder y la vista previa muestra también sus diagramas: vista previa de Markdown con Quick Look.
Export as PDF… dibuja los diagramas antes de crear el PDF: Markdown a PDF en el Mac. Un archivo HTML exportado carga Mermaid desde internet al abrirlo.
Cuando un diagrama no aparece
- Revisa la primera línea: nombra el tipo de diagrama, como
flowchart TDosequenceDiagram. - Pon entre comillas dobles,
"…", una etiqueta que contenga paréntesis, dos puntos o comillas. - Un error de sintaxis muestra el mensaje de error de Mermaid en lugar del dibujo.
Preguntas sobre Mermaid en el Mac
¿DotMD muestra diagramas Mermaid sin conexión?
Sí. Mermaid está integrado en DotMD y dibuja en tu Mac, sin conexión a internet. Solo un archivo HTML exportado lo carga desde internet.
¿Es gratis ver diagramas Mermaid?
Sí. Leer Markdown con diagramas, carpetas, pestañas y Quick Look es gratis, para siempre. Editar con vista previa en vivo forma parte de DotMD Editor, $14.99 una vez.
¿Qué diagramas Mermaid puedo usar?
Diagramas de flujo, de secuencia, de clases, de estados y de entidad-relación, diagramas de Gantt, gráficos circulares, mapas mentales, líneas de tiempo y grafos de git. El editor tiene una plantilla para cada uno.
¿Cómo edito Mermaid con vista previa en vivo?
Con DotMD Editor, pulsa ⌘E y luego ⌥⌘E. El diagrama se redibuja junto al texto mientras escribes.