🎨 Herramientas para Generar Diagramas de Código

🐍 Scripts Python Disponibles

📊 generate_flowcharts.py

Genera diagramas básicos de flujo del código:

Diagrama de flujo principal
Diagrama de clases
Diagrama de secuencia

python generate_flowcharts.py

🚀 generate_advanced_diagrams.py

Genera diagramas avanzados con múltiples formatos:

Flujo avanzado con estilos
Gráfico de llamadas de funciones
Diagrama de flujo de datos
Diagrama de estados del sistema
Archivo Graphviz DOT

python generate_advanced_diagrams.py

📦 install_diagram_deps.py

Instala dependencias necesarias para diagramas:

graphviz: Diagramas vectoriales
pyflowchart: Diagramas de flujo
pydot: Manipulación DOT
matplotlib: Gráficos
networkx: Análisis de redes

python install_diagram_deps.py

🎯 Tipos de Diagramas Generados

🔄 Diagramas de Flujo

Formato: Mermaid Flowchart
Contenido: Flujo del programa principal
Características: Decisiones, bucles, procesos
Archivo: docs/diagramas_codigo/flujo_principal.md

🏗️ Diagramas de Clases

Formato: Mermaid Class Diagram
Contenido: Estructura de clases y relaciones
Características: Atributos, métodos, herencia
Archivo: docs/diagramas_codigo/diagrama_clases.md

⏱️ Diagramas de Secuencia

Formato: Mermaid Sequence Diagram
Contenido: Interacción entre componentes
Características: Mensajes, temporización
Archivo: docs/diagramas_codigo/diagrama_secuencia.md

📞 Gráficos de Llamadas

Formato: Mermaid Graph
Contenido: Dependencias entre funciones
Características: Subgráficos por módulo
Archivo: docs/diagramas_avanzados/llamadas_funciones.md

📊 Diagramas de Flujo de Datos

Formato: Mermaid Graph
Contenido: Flujo de datos entre componentes
Características: Entrada, procesamiento, salida
Archivo: docs/diagramas_avanzados/flujo_datos.md

🎯 Diagramas de Estados

Formato: Mermaid State Diagram
Contenido: Estados del sistema
Características: Transiciones, eventos
Archivo: docs/diagramas_avanzados/estados_sistema.md

🛠️ Herramientas Externas

📈 Mermaid

Sitio: https://mermaid-js.github.io/mermaid/
Editor: https://mermaid.live/
Integración: GitHub, GitLab, Sphinx
Formato: Markdown con bloques de código

🎨 Graphviz

Sitio: https://graphviz.org/
Formato: DOT language
Salida: PNG, SVG, PDF
Comando: dot -Tpng archivo.dot -o salida.png

📊 PyFlowchart

Documentación: https://github.com/cdfmlr/pyflowchart
Uso: Convierte código Python a diagramas
Formato: Mermaid, DOT
Instalación: pip install pyflowchart

🔍 NetworkX

Documentación: https://networkx.org/
Uso: Análisis de redes y grafos
Visualización: Matplotlib
Instalación: pip install networkx

📋 Comandos Útiles

🔧 Instalar Dependencias

# Instalar todas las dependencias
python install_diagram_deps.py

# Instalar manualmente
pip install graphviz pyflowchart pydot matplotlib networkx

📊 Generar Diagramas

# Diagramas básicos
python generate_flowcharts.py

# Diagramas avanzados
python generate_advanced_diagrams.py

# Ambos
python generate_flowcharts.py && python generate_advanced_diagrams.py

🎨 Convertir Formatos

# DOT a PNG
dot -Tpng docs/diagramas_avanzados/graphviz.dot -o diagrama.png

# DOT a SVG
dot -Tsvg docs/diagramas_avanzados/graphviz.dot -o diagrama.svg

# DOT a PDF
dot -Tpdf docs/diagramas_avanzados/graphviz.dot -o diagrama.pdf

📖 Regenerar Documentación

# Generar HTML
sphinx-build -b html docs docs/_build/html

# Servir localmente
python -m http.server 8000 --directory docs/_build/html

🎯 Casos de Uso

🔍 Análisis de Código

Identificar funciones principales
Mapear dependencias entre módulos
Visualizar flujo de datos
Detectar complejidad ciclomática

📚 Documentación

Explicar arquitectura del sistema
Mostrar interacciones entre componentes
Ilustrar flujos de trabajo
Documentar estados del sistema

🛠️ Mantenimiento

Identificar puntos de fallo
Optimizar rutas críticas
Refactorizar código complejo
Planificar mejoras futuras

🚀 Integración con Sphinx

📄 Configuración

# conf.py
extensions = [
    'sphinx.ext.autodoc',
    'myst_parser',
    'sphinx_mermaid',  # Si está disponible
]

📝 Uso en Documentación

# En archivos .md

```mermaid
flowchart TD
    A[Inicio] --> B[Proceso]
    B --> C[Fin]
```

En archivos .rst

.. mermaid::

flowchart TD A[Inicio] –> B[Proceso] B –> C[Fin]

## 🎉 **Ventajas de esta Aproximación**

### ✅ **Automático**
- **Generación automática** desde código fuente
- **Actualización automática** al cambiar código
- **Consistencia** entre código y documentación

### ✅ **Múltiples Formatos**
- **Mermaid**: Para web y documentación
- **Graphviz**: Para publicaciones
- **PNG/SVG**: Para presentaciones
- **PDF**: Para impresión

### ✅ **Integrado**
- **Sphinx**: Documentación técnica
- **GitHub**: Visualización automática
- **GitLab**: Soporte nativo
- **Markdown**: Compatibilidad universal

---

*Herramientas para generar diagramas de código automáticamente desde Python* 🐍✨