Empieza con un ejemplo o pega una definición Mermaid. Renderiza el texto, revisa la vista previa y exporta el diagrama.
Se ejecuta localmente en tu navegadorUsa solo sintaxis Mermaid. Las etiquetas HTML se depuran: los scripts y los manejadores de eventos se eliminan.
Guarda la definición Mermaid junto al código, renderízala aquí para revisarla y descarga el resultado cuando necesites una imagen portátil. La herramienta no usa temas remotos, almacenamiento en la nube ni enlaces de seguimiento.
Pega una definición Mermaid y la página la dibuja con un renderizador Mermaid 11.17.1 incluido; después puedes copiar el marcado SVG o descargarlo como kivtools-diagram.svg. Los tres ejemplos integrados (diagrama de flujo, diagrama de secuencia y modelo ER) son un punto de partida: en las pruebas también se renderizaron diagramas de estado, diagramas de clases y gráficos de Gantt, porque el analizador acepta toda la gramática de Mermaid.
El análisis, la disposición y el estilo se ejecutan en esta pestaña. El texto del diagrama no se sube, el renderizado funciona sin conexión una vez cargada la página y el SVG exportado lleva sus propios estilos en lugar de referencias externas.
La primera línea elige la gramática: flowchart LR, sequenceDiagram, erDiagram, stateDiagram-v2, classDiagram, gantt y los demás tipos de Mermaid 11 se renderizaron en las pruebas. Una primera palabra desconocida detiene el analizador de inmediato, y una definición copiada de otra herramienta puede usar sintaxis que esta versión ya no acepta.
El editor es texto plano: no hay autocompletado ni vista previa en vivo, así que renderiza después de cada cambio y usa la línea de estado como único canal de respuesta. Volver a cargar el ejemplo es la forma más rápida de recuperar un documento que se sabe que se analiza.
El renderizador usa el modo estricto de Mermaid. En las pruebas, una etiqueta con <img src=x onerror=...> volvió con el manejador de eventos eliminado, las etiquetas script no se ejecutaron, los enlaces javascript: se descartaron y las directivas click no produjeron enlaces externos. Las etiquetas pueden contener HTML seguro, como negritas y saltos de línea.
Interprétalo como una garantía de depuración, no como una prohibición de HTML: la herramienta elimina el contenido ejecutable de las etiquetas, pero no rechaza la definición. Aun así, evita incluir datos sensibles en el texto — la página es local, pero el SVG exportado es un archivo que puedes compartir.
Copiar SVG pone el marcado SVG en el portapapeles; Descargar SVG guarda ese mismo marcado como kivtools-diagram.svg. Ambos botones permanecen desactivados hasta que hay un diagrama renderizado, y Limpiar los vuelve a desactivar. El archivo exportado se abre solo y puede incrustarse en Markdown, en una página HTML o en una solicitud de cambios.
Un error de sintaxis no vacía el lienzo: la última vista previa correcta sigue visible mientras la línea de estado muestra el mensaje del analizador con el número de línea. Comprueba esa línea antes de copiar el SVG, sobre todo si el diagrama se editó con prisa.