Comparativa: D2 vs Mermaid vs React Flow vs Cytoscape¶
Mismo flujo (File Transfer) renderizado con 4 tecnologías. Elige tu favorita.
1a. D2 v1 (original)¶
1b. D2 v2 (mejorado: bordes, sombras, separador productor/consumidor, auditoría)¶
2. Mermaid (actual — básico)¶
3. Animated Flow (nodos animados + flechas curvas + hover + minimap)¶
4. Cytoscape.js (layout automático + animación de entrada + hover)¶
Resumen¶
| Feature | D2 | Mermaid | Animated Flow | Cytoscape |
|---|---|---|---|---|
| Visual | Profesional | Básico | Excelente | Muy bueno |
| Animaciones | No | No | Nodos + edges | Nodos + edges |
| Interactivo | No | No | Hover effects | Zoom, pan, hover |
| Hover | No | No | Scale + shadow | Borde dorado |
| Minimap | No | No | Sí | No |
| Peso | SVG ligero | JS incluido | 0 KB (vanilla) | 300KB CDN |
| Auto-layout | Sí (elk) | Sí | Manual | Sí (dagre) |