Diagramas escritos como código
Diagram as Code
Dibuja diagramas de flujo, de secuencia y gráficos de torta de Mermaid mientras escribes, con analizador y trazado propios, dice exactamente qué sintaxis admite y exporta en SVG o PNG.
Texto Mermaid a la izquierda, el dibujo a la derecha, actualizándose mientras escribes. El analizador, la disposición y el renderizador son propios de este sitio y no la biblioteca Mermaid, y por eso la gramática admitida se lista completa en la página: tres tipos de diagrama, y para cada uno exactamente las construcciones que se leen.
Código Mermaid
Vista previa
Gramática admitida (cualquier otra cosa se informa como error con el número de línea)
Diagrama de flujo — graph / flowchart
- Direcciones TD, TB, LR, RL, BT
- Formas [ ], ( ), ([ ]), [[ ]], [( )], (( )), > ], { }, {{ }}
- Líneas -->, ---, -.->, -.-, ==>, ===
- Etiquetas -->|texto|, -- texto -->, -. texto .->, == texto ==>
- A --> B --> C, A & B --> C
- subgraph nombre [título] … end (se puede anidar)
- style, classDef, class, :::nombreDeClase
- %% comentarios, ; separadores
No admitido: click, linkStyle, direction, las flechas <-->, --o y --x, cadenas Markdown
Secuencia — sequenceDiagram
- participant A as Nombre, actor B
- ->>, -->>, ->, -->, -x, --x, -), --)
- ->>+B / ->>-B, activate / deactivate
- Note left of · right of · over A,B
- loop, alt / else, opt … end
- autonumber
No admitido: par, critical, break, rect, box, create/destroy, links
Tarta — pie
- pie [showData] [title Algo]
- "nombre" : valor
Los diagramas de clases, de estados, ER, de Gantt, los mapas mentales y los demás tipos todavía no se dibujan. Para los diagramas de Gantt hay una herramienta aparte.
Cómo se usa
Empieza desde un ejemplo
Diagrama de flujo, de secuencia y de pastel tienen cada uno una muestra que usa casi todo lo que el analizador entiende. Editar una es más rápido que escribir desde la lista de sintaxis.
Lee el error por número de línea
Cualquier cosa fuera de la gramática admitida se rechaza con la línea y qué estaba mal, en lugar de dejarte un lienzo en blanco para que lo bisecciones.
Exporta o imprime
El SVG mantiene el texto seleccionable y escala limpiamente; el PNG a 2× es la opción segura para una presentación o un mensaje de chat.
Preguntas frecuentes
¿Qué tipos de diagrama funcionan?
Diagrama de flujo (graph / flowchart), sequenceDiagram y pie. Class, state, ER, gantt, gitGraph, mindmap y el resto se nombran en el error en lugar de fallar vagamente; para un diagrama de Gantt hay una herramienta aparte en este sitio.
Mi diagrama funciona en mermaid.live pero no aquí
Probablemente una construcción fuera de la lista de la página: `click`, `linkStyle`, `direction` dentro de un subgraph, las flechas `<-->`, `--o` y `--x`, front matter YAML, o cadenas Markdown. El error nombra cuál, y la lista es el contrato completo.
¿El texto con tildes, eñes o en coreano se distribuye bien?
Sí. Los anchos de las cajas se miden contando cada carácter CJK a ancho completo y cada letra latina, con tilde o sin ella, a uno, así que una etiqueta en coreano no desborda su nodo como lo hace en renderizadores que suponen que todos los caracteres son de ancho medio. La medida es por punto de código y no normaliza antes, de modo que una «ñ» escrita descompuesta en un Mac (n + tilde combinante) sí cuenta como dos: si una etiqueta sale un poco ancha, pásala antes por el normalizador.
¿Mi diagrama se envía a algún sitio?
No. El análisis y el renderizado ocurren en la página, y el borrador se guarda en este navegador. No se sube nada, lo que importa cuando el diagrama es tu arquitectura interna.
Puede recibir de
Creador de diagramas de Gantt
Gantt Chart Builder
Convierte una tabla de tareas, escrita a mano o pegada como CSV, en un diagrama de Gantt en escala de días, semanas o meses, con flechas de dependencia, hitos, línea de hoy y fines de semana sombreados, y lo exporta en SVG o PNG.
Lista de tareas
Todo List
Guarda una lista de pendientes en tu navegador con fechas de entrega, etiquetas y edición desde el teclado, y la exporta como Markdown.
Bloc de notas rápido
Scratch Notepad
Un bloc de texto plano que se guarda mientras escribes, sobrevive a una recarga y lleva la cuenta de palabras.
Empaquetador de sprites
Sprite Sheet Packer
Junta muchas imágenes en un solo atlas y emite el mapa de fotogramas en CSS o JSON.
Después
Estas aceptan lo que produce esta herramienta, así que el resultado puede pasar directamente.
Creador de diagramas de Gantt
Gantt Chart Builder
Convierte una tabla de tareas, escrita a mano o pegada como CSV, en un diagrama de Gantt en escala de días, semanas o meses, con flechas de dependencia, hitos, línea de hoy y fines de semana sombreados, y lo exporta en SVG o PNG.
Editor de Markdown
Markdown Editor
Edita Markdown con vista previa en vivo y exporta el HTML renderizado, con tablas y listas de tareas de GFM.
Optimizador de SVG
SVG Optimiser
Quita los restos que deja el editor, funde las transformaciones y redondea la precisión de los trazados, mostrando el resultado lado a lado.
Lista de tareas
Todo List
Guarda una lista de pendientes en tu navegador con fechas de entrega, etiquetas y edición desde el teclado, y la exporta como Markdown.
Codificador y decodificador Base64
Base64 Encoder & Decoder
Codifica y decodifica Base64 y Base64URL, para texto o archivos, tratando UTF-8 correctamente.
Quitar el fondo de una imagen
Background Remover
Recorta un fondo plano o de un solo color en el espacio OKLab y devuelve un PNG transparente, con pincel para corregir los bordes.