MarkNode renderiza diagramas directamente en la vista previa. Escribes un diagrama en un bloque de código delimitado usando la sintaxis de Mermaid —una forma de describir en texto plano diagramas de flujo, diagramas de secuencia y más— y MarkNode lo dibuja como una imagen en lugar del código, completamente sin conexión.
Escribir un diagrama
Usa un bloque de código delimitado con mermaid como identificador de lenguaje:
```mermaid
flowchart TD
Start[Start] --> Decision{Need a diagram?}
Decision -->|Yes| Draw[Write it in Markdown]
Decision -->|No| Skip[Keep writing prose]
Draw --> Done[Done]
Skip --> Done
```La vista previa sustituye el bloque de código por el diagrama de flujo renderizado. El código fuente Markdown no cambia: MarkNode solo dibuja una imagen a partir de él; si quieres modificar el diagrama, editas el texto mermaid y la imagen se actualiza.
Tipos de diagrama con estilo completo
Los diagramas de flujo, de secuencia, de clases y de estados reciben el tratamiento completo de MarkNode: se disponen y componen tipográficamente para coincidir con el resto de tu documento, en lugar de ser una simple imagen genérica insertada.
Un diagrama de secuencia, por ejemplo:
```mermaid
sequenceDiagram
participant Writer
participant MarkNode
Writer->>MarkNode: Write a mermaid code block
MarkNode-->>Writer: Render diagram in preview
```
Los diagramas de clases y de estados usan el mismo bloque mermaid con sus propias palabras clave de Mermaid (classDiagram, stateDiagram-v2) y se renderizan con el mismo nivel de acabado.
Otros tipos de diagrama
Muchos otros tipos de diagrama de Mermaid —incluidos los gráficos circulares y los diagramas de Gantt— también se renderizan hoy en MarkNode, como diagramas reales con el estilo de tu tema en lugar de como código. El mismo nivel de acabado en la disposición personalizada que reciben los diagramas de flujo, de secuencia, de clases y de estados está previsto para estos tipos de diagrama en una actualización futura.
Coincidir con tu tema
En la vista previa, los diagramas siguen el tema de la aplicación de tu documento. Cambia de tema y cualquier diagrama en pantalla se reestiliza junto con el resto de la vista previa: no hay nada que configurar por separado.
Las vistas previas de Quick Look siguen en cambio la apariencia clara/oscura del sistema de tu Mac. Los diagramas de flujo, de secuencia, de clases y de estados coinciden en ambos casos; los diagramas circulares y de Gantt se renderizan actualmente con una única paleta en Quick Look.
Dónde aparecen los diagramas
Los diagramas se renderizan en todas las superficies que muestran tu Markdown renderizado:
- El panel de vista previa acoplado
- La ventana de vista previa desacoplada
- Quick Look de macOS (pulsa Espacio sobre un archivo Markdown en el Finder; consulta Vistas previas de Quick Look)
- La exportación a DOCX, como imagen incrustada
Errores
Si la sintaxis Mermaid de un diagrama tiene un error —un tipo de diagrama no reconocido, una errata en la sintaxis—, MarkNode muestra el bloque de código original en lugar de una imagen rota o en blanco. El resto del documento se renderiza con normalidad; solo se ve afectado ese bloque. Corrige el código fuente y el diagrama aparecerá la próxima vez que se actualice la vista previa.
Sintaxis admitida
MarkNode sigue la sintaxis propia del proyecto Mermaid. Para conocer toda la variedad de tipos de diagrama y opciones, consulta la documentación oficial de Mermaid: todo lo que sea válido allí es lo que MarkNode intenta renderizar.