Diagramas de Flujo · Flowchart Diagrams

Editor de diagramas de flujo en un panel lateral de VS Code, con sincronización bidireccional bajo demanda entre diagrama y código, y soporte multi-lenguaje. Bilingüe (ES/EN): sigue el idioma de VS Code.

A flowchart editor in a VS Code side panel with on-demand two-way sync between diagram and code, and multi-language support. Bilingual (ES/EN): follows your VS Code language.

✨ Características · Features

• Dibuja a mano · draw by hand: arrastra figuras, redimensiónalas, edita su texto (doble clic), etiqueta flechas, elimina, limpia.
• Código → Diagrama: Python, JavaScript, TypeScript, Java, C, C++, C#, Go. Usa el lenguaje del archivo activo.
• Diagrama → Código: elige el lenguaje destino (los anteriores + PHP, Rust y Pseudocódigo).
• Nunca pierde código: lo no soportado se conserva como nodo de proceso con el texto crudo.
• Tema nativo: se adapta a claro/oscuro de VS Code.

▶️ Comandos · Commands

Abre la paleta de comandos (Ctrl+Shift+P) y escribe «Diagramas» o "Flowchart".

🔷 Figuras · Shapes

Óvalo (inicio/fin), rectángulo (proceso), rombo (decisión), paralelogramo (E/S), hexágono (bucle), doble borde (función), try/catch, switch/case, datos, base de datos, comentario, conector. Flechas uni y bidireccionales, etiquetables.

🚀 Uso rápido · Quick start

1. Abre un archivo de código y ejecuta Generar diagrama desde código, o abre el lienzo y dibuja.
2. Edita: doble clic en figuras/flechas, arrastra bordes para redimensionar, Supr o × para borrar.
3. Elige el lenguaje destino y pulsa Generar código.

Manual completo bilingüe: botón ❔ Manual en el lienzo (o el archivo docs/MANUAL.md).

🛠️ Desarrollo · Development

npm install && npm run build

Pulsa F5 para el Extension Development Host. Tests: npm run test:core. Empaquetar: npm run package.

Stack: TypeScript · React · @xyflow/react · web-tree-sitter · dagre.