Herramientas
Inicio
AI
Sitios de IA
AI Skill
Herramientas de IA
Json
Formato JSON
Convertidor JSON
JSON Diff
JSON→Tipos
Mermaid Flowchart
Editor Markdown
Imagen
Compresor de imágenes
Mejorador de imágenes
Image Privacy
Eliminar marca de agua
Editor de imágenes
Más
Formato y Codificación
Formato SQL
Herramienta Base64
Codificar/Decodificar URL
Compresor JS
Formateador de cookies
Desarrollo y Productividad
Regex Tester
Analizador CRON
Generador UUID
Timestamp Converter
Excel en línea
Diseño y Aprendizaje
CSS Layout
Editor SVG
Generador de Robots.txt
Mecanografía
Teclado
Idioma
English
简体中文
繁體中文
日本語
Tiếng Việt
Español
Português
हिन्दी
Generador de diagramas Mermaid online gratis
Código Mermaid
Listo
flowchart TD A[Idea] --> B[Write Mermaid syntax] B --> C{Valid syntax?} C -- Yes --> D[Render diagram] C -- No --> E[Fix and try again] D --> F[Export SVG]
Vista previa
Render Diagram
Copy Source
Copy SVG
Download SVG
Download PNG
Tu diagrama generado aparecerá aquí.
Configuración
Tema
Default
Neutral
Dark
Forest
Base
Generar automáticamente al escribir
Pega cualquier sintaxis Mermaid válida, genera el diagrama y expórtalo como SVG.
Ejemplos
Diagrama de flujo (graph TD)
Gráfico vertical con nodo de decisión
Flujo de navegación de app
Diagrama de navegación multi-rama
Arquitectura (graph LR)
Arquitectura de sistema izquierda a derecha
Consejos
Usa
graph TD
o
flowchart TD
para diagramas verticales.
Usa
graph LR
o
flowchart LR
para diagramas horizontales.
Usa
{}
para nodos rombo/decisión,
[]
para nodos rectangulares.
Mantén las etiquetas cortas para diseños más limpios.
Resolución de exportación PNG
Multiplicador de resolución:
6x
3x
15x