# Creador de diagramas de sistemas URL: https://discuvr.org/system-diagram/?hl=es Last updated: 2026-11-08 MCP tool: `draw_system_diagram` Dibuja diagramas de arquitectura y de flujo escribiendo A -> B. Diseño automático, grupos plegables, pasos numerados y exportación PNG y SVG. En una pizarra digital dibujas cada caja y cada flecha y las alineas a mano. Aquí escribes qué habla con qué, una línea por flecha, y el diseño se hace solo. Agrupa servicios relacionados y pliega el grupo en una caja cuando necesites ver el conjunto; ábrelo de nuevo para el detalle. ## Qué hace - Diseño automático, de izquierda a derecha o de arriba abajo, que se actualiza mientras escribes. - Formas elegidas según el nombre: DB es una base de datos, Kafka una cola, User una persona y un nombre con ? al final una decisión. - Grupos que se pliegan en una caja, para que un mismo diagrama sirva de vista general y de detalle. - También puedes arrastrar, conectar, renombrar y añadir cajas en el lienzo; cada cambio se escribe en el texto. - Pasos numerados, estilo dibujado a mano, exportación PNG y SVG y enlaces para compartir. No se sube nada. ## Cómo funciona 1. Escribe líneas como User -> Web App -> Orders DB o empieza con una plantilla. 2. Añade grupos con Nombre { ... }, etiquetas tras dos puntos y --> para llamadas asíncronas. 3. Alterna entre Vista general y Detalles, recoloca cajas arrastrando y exporta o copia un enlace. ## Preguntas **¿En qué se diferencia de Excalidraw?** Excalidraw es una pizarra libre: colocas tú cada forma y cada flecha. Aquí el texto es el diagrama y el diseño es automático, así que añadir un servicio es una línea, no dibujar y realinear cajas. Para un boceto suelto, Excalidraw sigue siendo mejor. **¿Cómo muestro una vista general y una detallada?** Pon las cajas relacionadas en un grupo con Nombre { ... }. Vista general pliega cada grupo en una sola caja y une sus flechas; Detalles los vuelve a abrir. También puedes plegar un grupo cada vez desde su cabecera. **¿Se guarda mi diagrama en algún sitio?** No. Se dibuja en tu navegador y se guarda en su almacenamiento local. Un enlace compartido lleva el diagrama dentro del propio enlace, después del signo #, que los navegadores nunca envían al servidor. **¿Puedo pegar un diagrama de flujo de Mermaid?** No directamente; no hay importación de Mermaid. Las líneas simples como A -> B funcionan, pero hay tres diferencias. Borra la cabecera graph TD, o se convertirá en una caja, y escribe direction: down en su lugar. Quita las etiquetas de Mermaid entre corchetes, porque aquí el texto entre [ ] se lee como etiquetas de forma y color. Y --> dibuja aquí una flecha discontinua para una llamada asíncrona, mientras que en Mermaid es una flecha normal; usa -> para una continua. **¿Qué más puedo escribir además de A -> B?** A -> B: texto pone una etiqueta en la flecha, A --> B dibuja una flecha discontinua, A <-> B una de doble sentido y A <- B apunta hacia atrás. Nombre [db, blue] fija una forma y un color; las formas son service, db, cache, queue, actor, client, storage, external, decision, terminal y note. title: da nombre al diagrama, direction: down lo dispone de arriba abajo y una línea que empieza por # o // es un comentario. Un diagrama admite hasta 300 cajas, 600 flechas y 20.000 caracteres de texto. **¿Qué pasa con las flechas cuando pliego un grupo?** Las flechas entre cajas de dentro del grupo plegado se ocultan, y las que cruzan su borde pasan a empezar o terminar en la caja del grupo. Varias flechas entre las mismas dos cajas se funden en una flecha más gruesa que conserva la primera etiqueta y añade un recuento. Ejemplo: con Payments API y Ledger dentro de Payments { ... }, las líneas Checkout -> Payments API y Checkout -> Ledger se convierten en una sola flecha Checkout -> Payments x2 en Vista general. Un grupo dentro de un grupo plegado se pliega con él y, con Pasos activado, los números siguen a las flechas que quedan visibles, en el orden en que están escritas. ## Más en Herramientas para desarrolladores - [Formateador de JSON](https://discuvr.org/json-formatter/?hl=es) - [Formateador de Python](https://discuvr.org/python-formatter/?hl=es) - [Visor HTML](https://discuvr.org/html-viewer/?hl=es) - [Calculadora de subredes IP](https://discuvr.org/ip-subnet-calculator/?hl=es) ## Se usa a menudo con - [Comparar textos](https://discuvr.org/text-diff/?hl=es) --- Part of Discuvr (https://discuvr.org/): Discuvr is a collection of free, focused tools for day-to-day professional work - office and data utilities, legal and compliance helpers, privacy and security checks, and developer formatters. Every tool has its own page, and most can also be called from ChatGPT or Claude over MCP.