Repolode
Enviar
hediet

hediet/vscode-drawio

Extensión no oficial de VS Code para crear y editar diagramas de Draw.io (diagrams.net) directamente en el editor.

Ver en GitHubSitio web
Estrellas
9,511
Forks
470
Issues abiertos
171
Último commit
hace 15 horas

¿Qué es?

Esta extensión abre archivos .drawio, .dio, .drawio.svg y .drawio.png en el editor de Draw.io dentro de VS Code. Incluye una copia de Draw.io para usar sin conexión, de modo que puedes editar diagramas sin conexión a Internet. Puedes abrir archivos vacíos con estas extensiones para empezar un diagrama nuevo y usar un comando de conversión para cambiar de formato.

Los formatos .drawio.svg y .drawio.png son imágenes válidas que mantienen sincronizado el diagrama incrustado al guardar, por lo que pueden mostrarse directamente en lugares como los README de GitHub. Los archivos .drawio son XML sin procesar, lo que permite leer sus diferencias en git y facilita que los asistentes de IA los lean y editen.

Entre las funciones adicionales se incluyen varios temas de Draw.io, compatibilidad con Live Share para editar y presentar en colaboración, una opción de enlace al código que permite saltar desde un nodo con el nombre de un símbolo hasta su código fuente, y la edición en paralelo del diagrama y su XML.

Funciones clave

  • 01Edita archivos .drawio, .dio, .drawio.svg y .drawio.png en el editor de Draw.io.
  • 02Incluye por defecto una versión de Draw.io para usar sin conexión.
  • 03Mantiene actualizadas las imágenes SVG y PNG incrustadas al guardar.
  • 04Guarda los diagramas como XML sin procesar, cuyas diferencias se muestran claramente en git.
  • 05Es compatible con Live Share para editar y presentar en colaboración.
  • 06Enlaza los nodos del diagrama con símbolos del código para saltar al código fuente.

Casos de uso

  • Mantener los diagramas de arquitectura en el mismo repositorio que el código que describen.
  • Incrustar diagramas que se muestran directamente en los README de GitHub como archivos SVG.
  • Revisar cambios en los diagramas mediante diferencias de XML legibles en las pull requests.
  • Crear diagramas en colaboración con el equipo mediante Live Share.

Inicio rápido

  1. 1

    Instala la extensión desde VS Code Marketplace

  2. 2

    Crea un archivo vacío que termine en .drawio, .drawio.svg o .drawio.png y ábrelo

Antes de usarlo

  • Es una extensión no oficial, no desarrollada por el equipo de diagrams.net.
  • Está bajo la licencia GPL-3.0, una licencia copyleft.
  • La edición de Markdown en línea requiere VS Code Insiders y es experimental.

Temas

#diagram#drawio#vscode-extension#diagramming#svg#whiteboard#hacktoberfest

Preguntas frecuentes

¿Qué es vscode-drawio?
Extensión no oficial de VS Code para crear y editar diagramas de Draw.io (diagrams.net) directamente en el editor. Esta extensión abre archivos .drawio, .dio, .drawio.svg y .drawio.png en el editor de Draw.io dentro de VS Code. Incluye una copia de Draw.io para usar sin conexión, de modo que puedes editar diagramas sin conexión a Internet. Puedes abrir archivos vacíos con estas extensiones para empezar un diagrama nuevo y usar un comando de conversión para cambiar de formato.
¿vscode-drawio es gratuito? ¿Qué licencia tiene?
vscode-drawio es open source bajo la licencia GPL-3.0. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿vscode-drawio sigue mantenido?
Mantenimiento activo. El último commit de vscode-drawio fue el 6 nov 2026.
¿Para qué puedo usar vscode-drawio?
Mantener los diagramas de arquitectura en el mismo repositorio que el código que describen. Incrustar diagramas que se muestran directamente en los README de GitHub como archivos SVG. Revisar cambios en los diagramas mediante diferencias de XML legibles en las pull requests. Crear diagramas en colaboración con el equipo mediante Live Share.
¿Cómo se instala vscode-drawio?
Instala la extensión desde VS Code Marketplace Crea un archivo vacío que termine en .drawio, .drawio.svg o .drawio.png y ábrelo
¿Dónde consigo vscode-drawio?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/hediet/vscode-drawio

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados