Visor de Graphviz en línea
Edita código DOT de Graphviz a la izquierda y mira cómo se renderiza el grafo a la derecha mientras escribes. Cambia entre los motores de diseño dot, neato, fdp, sfdp, circo, twopi, osage y patchwork, y luego descarga el grafo en SVG o PNG o copia un enlace para compartir.
Última actualización:
Cómo usar Visor de Graphviz en línea
- Escribe o pega código DOT en el editor, o empieza con uno de los ejemplos de arriba.
- Mira cómo se actualiza la vista previa mientras escribes. Los errores de sintaxis aparecen bajo el editor con el número de línea resaltado.
- Elige un motor de diseño: dot para jerarquías y diagramas de flujo, neato o fdp para redes, circo para anillos y twopi para árboles radiales.
- Acerca, aleja y desplázate con los botones + / −, Ctrl + rueda del ratón o arrastrando la vista previa.
- Descarga el grafo en SVG para documentos y la web o en PNG para presentaciones, o copia un enlace para compartirlo.
Referencia rápida del lenguaje DOT
| Quieres | Código DOT |
|---|---|
| Grafo dirigido con flechas | digraph G { a -> b -> c; } |
| Grafo no dirigido | graph G { a -- b; b -- c; } |
| Un nodo a varios | a -> {b c d}; |
| Etiqueta y forma del nodo | db [label="Base de datos", shape=cylinder]; |
| Valores predeterminados para todos los nodos / aristas | node [shape=box, fontname="Helvetica"]; edge [color=gray]; |
| Cajas rellenas y redondeadas | node [shape=box, style="rounded,filled", fillcolor="#eef5f0"]; |
| Etiqueta de arista, arista discontinua | a -> b [label="reintentar", style=dashed]; |
| Diseño de izquierda a derecha | rankdir=LR; |
| Mantener nodos en el mismo nivel | { rank=same; b; c; } |
| Caja alrededor de un grupo | subgraph cluster_x { label="Grupo"; a; b; } |
| Etiqueta de varias líneas | a [label="línea uno\nlínea dos"]; |
| Nodo tipo tabla | user [shape=record, label="{Usuario|id|email}"]; |
Comparación de motores de diseño
| Motor | Diseño | Ideal para |
|---|---|---|
dot | Por capas (jerárquico), las aristas fluyen en una dirección | Diagramas de flujo, grafos de dependencias, máquinas de estados, organigramas |
neato | Modelo de muelles (mayorización de estrés) | Redes no dirigidas pequeñas y medianas |
fdp | Dirigido por fuerzas, admite clústeres | Grafos no dirigidos con grupos |
sfdp | Dirigido por fuerzas multiescala | Grafos grandes con miles de nodos |
circo | Circular | Anillos, estructuras cíclicas, topologías de red |
twopi | Radial, raíz en el centro | Árboles y grafos en estrella |
osage | Empaqueta los clústeres en una matriz | Elementos agrupados, vistas generales de módulos |
patchwork | Mapa de árbol cuadriculado | Tamaños jerárquicos (define area en los nodos) |
Consejos
- Pon entre comillas los ID con espacios o símbolos:
"API gateway" -> "user-db". Los ID sin comillas solo pueden contener letras, dígitos y guiones bajos, o ser un número. - Errores comunes: que falte un punto y coma no es problema en DOT, pero que falte una llave de cierre, un ID sin comillas con un guion o
->dentro de ungraphno dirigido son errores de sintaxis. - Los colores pueden ser nombres (
tomato,lightblue), hexadecimales ("#2f6b4f") o tripletes HSV ("0.6 0.4 0.9"). - ¿Prefieres una sintaxis de diagramas tipo Markdown? Prueba el editor de diagramas Mermaid, que GitHub renderiza dentro de los archivos README.
Preguntas frecuentes
¿Qué es el lenguaje DOT?
DOT es el lenguaje de descripción de grafos en texto plano de Graphviz. Declaras un graph o digraph, enumeras los nodos con atributos opcionales como la forma y el color, y los conectas con aristas -- (no dirigidas) o -> (dirigidas). Después, Graphviz calcula el diseño automáticamente.
¿Qué motor de diseño debo usar?
dot dibuja grafos jerárquicos por capas y es el mejor para diagramas de flujo, grafos de llamadas y árboles de dependencias. neato y fdp usan modelos de muelles para redes no dirigidas; sfdp es la versión escalable para miles de nodos. circo coloca los nodos en círculos, twopi dibuja diseños radiales alrededor de una raíz, osage empaqueta clústeres y patchwork dibuja mapas de árbol.
¿Es el Graphviz real?
Sí. La herramienta usa viz.js, una compilación a WebAssembly del código C oficial de Graphviz, así que los diseños y la salida SVG coinciden con la línea de comandos dot. Si esa biblioteca no se puede descargar, se muestra una vista previa integrada simplificada, claramente indicada.
¿Cómo cambio la dirección de un grafo?
Añade rankdir=LR; dentro del grafo para un diseño de izquierda a derecha. Otros valores son TB (de arriba abajo, el predeterminado), BT y RL. rankdir lo usa el motor dot.
¿Cómo agrupo nodos en una caja?
Ponlos en un subgrafo cuyo nombre empiece por cluster, por ejemplo subgraph cluster_backend { label="Backend"; api; db; }. Los motores dot, fdp y osage dibujan un rectángulo alrededor de cada clúster.
¿Puedo exportar una imagen de alta resolución?
Sí. SVG es un formato vectorial que se mantiene nítido a cualquier tamaño y se puede editar en Inkscape o Illustrator. Para PNG, elige una escala de 1× a 4×; 2× es una buena opción para presentaciones y documentos.
¿Se sube mi grafo a algún servidor?
No. El código DOT se renderiza en tu navegador y se guarda solo en el almacenamiento local de tu navegador. Un enlace compartido contiene el propio código en la parte de la URL después de #, que los navegadores no envían al servidor.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.