Flowchart de Mermaid a diagrama editable

Cómo funciona

1. 01

   Pega tu código de Mermaid

   Código de un archivo Markdown, un README o un chat de IA. Un bloque de código mermaid alrededor y un bloque de configuración al principio no son problema.

2. 02

   Mira un diagrama editable

   Los nodos del diagrama de flujo se convierten en formas como proceso, decisión y documento, los subgrafos en marcos y las entidades ER en tarjetas de tabla.

3. 03

   Ábrelo en Archboard

   Guárdalo como un diagrama nuevo para mover y cambiar el estilo de las formas, añadir notas, compartir un enlace o exportarlo en SVG y PNG. Para registrarte basta una cuenta de Google o GitHub.

Qué se dibuja a partir del código de Mermaid

Estas partes de tu código se convierten en elementos editables del diagrama:

• flowchartgraph

  Los diagramas flowchart y graph, incluido flowchart-elk, con cada nodo y su etiqueta. Los prefijos de Font Awesome como fa:fa-car se quitan de las etiquetas.

• @{ shape }

  Las formas de los nodos, escritas con corchetes o con la sintaxis de formas más reciente, se asignan a elementos de diagrama de flujo: proceso, decisión, inicio y fin, datos, documento, preparación, entrada manual y conector. Las formas sin equivalente se convierten en la forma básica más parecida, como un cilindro, o en una caja de proceso.

• subgraph

  Los subgrafos como marcos alrededor de sus nodos, incluidos los subgrafos anidados. Un subgrafo vacío se omite.

• -->-.->==>

  Las flechas con sus etiquetas, continuas, punteadas o gruesas, incluidas cadenas como A --> B --> C y bifurcaciones como A --> B & C.

• erDiagram

  Las entidades de erDiagram como tarjetas de tabla que enumeran cada atributo con su tipo y su clave PK, FK o UK, y las relaciones con su cardinalidad. Las relaciones no identificadoras se dibujan discontinuas.

• TDLR

  La dirección del diagrama de flujo, TD, TB, LR, RL o BT, define hacia dónde fluye el diagrama.

Tipos de diagramas de Mermaid compatibles

Hoy se convierten los diagramas de flujo (flowchart y graph) y los diagramas entidad-relación (erDiagram). sequenceDiagram, classDiagram, stateDiagram, gantt, pie, mindmap, timeline, gitGraph y los tipos más nuevos aún no se convierten: la herramienta indica el tipo que encontró en lugar de dibujar un diagrama de flujo incorrecto.

Qué deja fuera una importación de Mermaid

• Los diagramas de secuencia, de clases, de estados y de Gantt, los gráficos circulares, los mapas mentales y otros tipos. Por ahora solo se convierten los diagramas de flujo y los diagramas ER.
• Los colores y fuentes de classDef, style, linkStyle y class: el diagrama empieza con los estilos de Archboard, que puedes cambiar en el lienzo.
• Los iconos e imágenes de los nodos: los ajustes icon e img se descartan y la etiqueta se conserva.
• Un vínculo en vivo con tu código: editar el lienzo no cambia el código de Mermaid, y los cambios posteriores en el código no actualizan el diagrama.