Diagramas Mermaid en neoDraw importar y editar visualmente

Tienes un diagrama Mermaid como código y quieres mostrarlo en WordPress? La imagen generada automáticamente es un buen comienzo. Pero para un artículo terminado a menudo hay que ajustar espacios, colores o etiquetas.

Para eso puedes usar neoDraw. El plugin gratuito de WordPress trae un editor de dibujo basado en Excalidraw directamente a tu sitio. Pegas tu código Mermaid, revisas la vista previa y aceptas el diagrama como dibujo editable. No necesitas conocimientos previos en neoDraw : Esta guía te lleva desde la descarga y el import hasta el archivo SVG en la biblioteca de medios de WordPress.

El flujo es útil para documentación técnica, arquitectura de software, procesos y diagramas UML. Además encontrarás un prompt GPT listo para usar y ejemplos de diagramas de flujo, de secuencia y de clases.

1. neoDraw descargar gratis, instalar y activar en WordPress.
2. Abrir una nueva neoDrawdibujo en la biblioteca de medios o directamente en el maquetador que uses.
3. En el editor clica en Más herramientas y luego en Mermaid a Excalidraw.
4. Pega la sintaxis Mermaid a la izquierda y comprueba la vista previa a la derecha.
5. Haz clic en Insertar, edita formas y textos visualmente y guarda el dibujo.

neoDraw guarda el resultado como SVG en la biblioteca de medios de WordPress. Desde allí puedes insertar el diagrama como una imagen normal en Gutenberg, Bricks, Elementor o el editor clásico.

Mermaid describe un diagrama como texto. Nodos, conexiones y dirección están en el código mientras el renderizador calcula la imagen. Eso es práctico para archivos README, wikis y documentación versionada porque un cambio en un proceso se guarda como una pequeña modificación de texto.

Para una web la representación calculada automáticamente a menudo no basta. Quizá quieras que un nodo de decisión destaque más, que una conexión tenga otro trazado o que el dibujo encaje con el diseño de la página. Una captura estática solo resuelve el problema superficialmente. Sigue siendo una imagen. Tras convertirlo a neoDraw puedes seleccionar las formas, flechas y textos generados y modificarlos con las herramientas del editor basado en Excalidraw.

La importación ahorra el trabajo mecánico. Mermaid construye la estructura, neoDraw se encarga del diseño. En un diagrama de flujo no tienes que crear cada caja por separado y luego unirlas con flechas. Tras pegarlo puedes mover, etiquetar, colorear o eliminar cualquier elemento compatible.

• Usar el código Mermaid existente como punto de partida
• Importar diagramas generados con ChatGPT u otro LLM
• Editar visualmente diagramas de flujo, diagramas de secuencia y diagramas de clases
• Añadir estilo de boceto, colores, tipografía, iconos y notas adicionales
• Guardar el diagrama terminado como un archivo SVG escalable en WordPress

Esto es especialmente útil para artículos técnicos, documentos de incorporación, descripciones de procesos, flujos de API, árboles de decisión y diagramas UML que deben verse claros y poder modificarse más tarde.

No necesitas conocer toda la sintaxis de Mermaid de memoria. Un modelo de lenguaje puede generar un primer borrador útil a partir de la descripción de un proceso. Indica el tipo de diagrama, la dirección de lectura, las etiquetas deseadas y el formato de salida. Pide expresamente solo código Mermaid sin explicación para que puedas copiar el resultado directamente.

Un prompt que funciona para un proceso de aprobación sencillo:

Crea un diagrama de flujo Mermaid para un proceso editorial de WordPress. Dirección de lectura de izquierda a derecha. Pasos: escribir el borrador, revisión técnica, si hace falta cambios volver al borrador, si no publicar. Devuelve solo código Mermaid válido en un bloque de código. Usa etiquetas cortas en alemán y no añadas pasos propios.

El posible resultado se ve así:

flowchart LR
    A[Entwurf schreiben] --> B{Fachlich freigegeben?}
    B -- Nein --> A
    B -- Ja --> C[Veroeffentlichen]

Revisa la lógica tú mismo. GPT puede omitir un paso, inventar una bifurcación o usar caracteres que Mermaid interprete de forma distinta a la esperada. La vista previa en neoDraw muestra esos problemas pronto.

La importación de Mermaid se ejecuta completamente en el neoDraw-Editor. No necesitas un Mermaid Live Editor externo ni guardar una PNG intermedia.

Descarga el archivo ZIP gratuito desde neoDraw abre en WordPress Plugins > Añadir plugin > Subir plugin, selecciona el archivo ZIP y activa el plugin. Después puedes crear un nuevo dibujo desde el enlace de acción neoDraw crear en la vista de plugins o desde la biblioteca de medios de WordPress.

Si ya trabajas en una página, puedes neoDraw también abrirlo desde el área de imágenes de Gutenberg, Bricks, Elementor o el editor clásico. El editor aparece dentro de tu flujo de trabajo de WordPress.

Haz clic en la barra de herramientas en Más herramientas. En la sección Generate encontrarás la entrada Mermaid a Excalidraw. El diálogo tiene dos páginas: a la izquierda el campo Mermaid-Syntax, a la derecha la vista previa.

neoDraw recuerda el último código Mermaid introducido localmente en el navegador. Si vuelves a abrir el diálogo más tarde, puedes continuar donde lo dejaste. No confíes en este almacenamiento temporal para diagramas importantes. Guarda el código original en tu documentación o en control de versiones.

Sustituye el ejemplo en el campo izquierdo por tu código Mermaid. La vista previa se actualiza mientras escribes. Un diagrama correcto aparece directamente a la derecha. Con sintaxis no válida el diálogo muestra un error en vez de insertar un resultado incompleto en el dibujo.

Para una primera prueba sirve un pequeño flowchart:

flowchart TD
    A[Solicitud] --> B{¿Completo?}
    B -- No --> C[Pregunta de seguimiento]
    C --> A
    B -- Sí --> D[Procesar]

Mantén las etiquetas cortas al principio. Frases largas agrandan los nodos y alteran el orden calculado automáticamente. El texto detallado puedes añadirlo después en neoDraw o explicarlo junto al diagrama.

Si la vista previa es correcta, haz clic en Insertar. neoDraw cierra el diálogo, coloca el diagrama en el centro del lienzo y ajusta la vista al nuevo contenido. Los tipos Mermaid compatibles se convierten en elementos de Excalidraw. Así puedes hacer clic en un nodo, cambiar su texto, reconectar una flecha o mover varios elementos juntos.

Esto diferencia el flujo de trabajo de exportar un Mermaid-SVG o capturas de pantalla. La gráfica no queda reducida a una representación final de píxeles o vectores. Se convierte en la base para seguir trabajando en el editor.

Tras la importación puedes cambiar colores, grosor de líneas, puntas de flecha, fuente, opacidad y estilo de boceto. Añade si hace falta formas libres, marcas a mano, iconos, imágenes o enlaces. Para un artículo suele ser útil resaltar en color solo la ruta principal y mantener los caminos secundarios más sobrios.

Luego guarda el dibujo en neoDraw. El plugin crea un archivo SVG en la biblioteca de medios de WordPress e incrusta los datos del editor. Así el dibujo seguirá siendo editable. Al mismo tiempo puedes usarlo como un objeto multimedia normal en entradas y páginas. El SVG permanece nítido en distintos tamaños de pantalla.

El diálogo actual de Mermaid menciona tres tipos de diagrama soportados directamente:

• Flowchart: Procesos, árboles de decisión, flujos de trabajo y dependencias
• Sequence Diagram: Mensajes y llamadas entre personas, servicios o componentes de software
• Class Diagram: Clases, atributos, métodos y relaciones en modelos semejantes a UML

Estos tipos se convierten en elementos editables de Excalidraw. Otros formatos de Mermaid, por ejemplo Gantt, Mindmap, State Diagram, ER-Diagram, User Journey o Pie Chart, pueden mostrarse en el diálogo como imagen. El resultado se puede mover o escalar como un todo, pero no editar nodo por nodo. Si la posproducción visual es clave, construye el contenido, si es posible, como flowchart, sequence diagram o class diagram.

Un Flowchart de Mermaid comienza con flowchart o graph. LR ordena el flujo de izquierda a derecha, TD de arriba hacia abajo:

flowchart LR
    A[Ticket eingegangen] --> B{Prioritaet hoch?}
    B -- Ja --> C[Sofort zuweisen]
    B -- Nein --> D[Backlog]
    C --> E[Loesung pruefen]
    D --> E

Un diagrama de secuencia es adecuado para comunicaciones ordenadas en el tiempo. Este ejemplo muestra una llamada REST simplificada de WordPress:

sequenceDiagram
    participant B as Browser
    participant W as WordPress
    participant A as API
    B->>W: Formular absenden
    W->>A: Anfrage senden
    A-->>W: Ergebnis liefern
    W-->>B: Ausgabe anzeigen

Después de la importación puedes mover participantes, acortar etiquetas y resaltar mensajes importantes con color.

Los diagramas de clases representan relaciones estáticas. Para una pequeña lógica de medios de WordPress el código podría ser así:

classDiagram
    class MediaItem {
        +String filename
        +String altText
        +save()
    }
    class Drawing {
        +String svgData
        +edit()
    }
    MediaItem <|-- Drawing

En neoDraw puedes añadir explicaciones adicionales después de la conversión sin complicar la sintaxis Mermaid original.

Empieza con la disposición general. Marca nodos relacionados y muévelos como grupo antes de corregir flechas individuales. Luego merece la pena una segunda pasada para tipografía y colores. Así evitas ajustar detalles finos varias veces.

Para diagramas técnicos suele funcionar mejor un sistema de colores limitado que un color por nodo. Usa por ejemplo un color para entradas, otro para decisiones y otro para resultados. neoDraw tiene rectángulos, rombos, elipses, flechas, lápiz a mano alzada, texto, marcos, iconos y una biblioteca. También puedes añadir enlaces clicables si un nodo debe apuntar a documentación o una subpágina.

Los elementos convertidos se comportan después como objetos normales dibujados en Excalidraw. Así puedes acentuar el aspecto deliberadamente dibujado a mano o suavizar las líneas, según si el diagrama debe parecer más un panel de taller o documentacion técnica.

neoDraw guarda dibujos en la biblioteca de medios de WordPress. Esto es más importante para el uso diario que una carpeta de exportación adicional: el archivo SVG tiene una entrada de attachment normal, se puede seleccionar, encontrar y volver a abrir en el editor.

En Gutenberg, Bricks, Elementor y el editor clásico añade neoDraw accesos directos en los campos de imagen correspondientes. También los maquetadores que toman imágenes de la biblioteca de medios pueden usar el SVG guardado. Crea el diagrama Mermaid donde luego edites el artículo.

Si actualizas un dibujo, revisa las páginas afectadas y vacía si procede la caché de la página o CDN. Para gráficos de proceso importantes deberías además conservar una copia local del código fuente Mermaid. El SVG contiene la neoDraw-Datos del editor, pero no reemplaza documentación técnica versionada.

• La vista previa queda en blanco: Comprueba la primera línea. Debe coincidir con el tipo de diagrama, por ejemplo flowchart TD o sequenceDiagram.
• Un diagrama de flujo falla con la palabra end: Mermaid puede tratar un end como palabra clave. Escribe End con la primera letra en mayúscula o pon la etiqueta entre comillas.
• Los caracteres especiales provocan un error de sintaxis: Pon etiquetas largas entre comillas y simplifica el texto al principio. Añade detalles tipográficos más tarde en neoDraw.
• El diagrama es demasiado ancho: Cambia de LR a TD, acorta las etiquetas o divide un gran flujo en dos diagramas.
• No se pueden seleccionar elementos individualmente: Probablemente usas un tipo de Mermaid que solo se renderiza como imagen. Para nodos editables directamente usa Flowchart, Sequence o Class diagram.
• El código GPT contiene texto explicativo: Copia solo el contenido del bloque de código Mermaid. Las frases antes o después del código no pertenecen al campo de sintaxis.

En los tipos soportados, las formas, textos y conexiones se conservan como elementos de Excalidraw. Puedes editarlos en el neoDraw-Editor y guardarlos junto con otros objetos. Para la publicación en WordPress este estado visual suele ser el relevante.

La importación no es una conexión bidireccional permanente. Si después de pegar un nodo en neoDraw si renombras o dibujas una flecha nueva, el editor no escribe ese cambio de vuelta en tu código Mermaid original. Si quieres mantener el código y el gráfico en paralelo, decide de antemano cuál versión es la fuente.

Para documentación técnica resulta útil Mermaid como fuente: cambia el código, vuelve a importar y luego haz solo unos pocos ajustes visuales. Para una imagen editorial del sitio web puede neoDraw ser la fuente una vez que se haya importado la estructura básica.

Un diagrama puede hacer un artículo más comprensible, pero no sustituye al texto explicativo. Los motores de búsqueda y los lectores de pantalla captan las relaciones complejas de un gráfico solo de forma limitada. Describe por tanto el proceso principal en el párrafo circundante y da al SVG almacenado un texto alternativo concreto.

¿Puedo editar un diagrama Mermaid en WordPress?

Mermaid es potente cuando una estructura lógica debe surgir rápidamente a partir de texto. neoDraw se encarga de la parte en la que un diagrama tiene que funcionar para lectores reales en una página de WordPress. Importas el código, corriges la apariencia con herramientas visuales y guardas el resultado como SVG editable en la biblioteca de medios.