vscode drawio

Draw.io vs integración de código

Esta extensión no oficial integra Draw.io (también conocida como diagrams.net) en el código VS.
Mencionado en el blog oficial de diagramas.net.

Características

• Editar .drawio , .dio , .drawio.svg o .drawio.png archivos en el editor sorteo.io.
  • Para crear un nuevo diagrama, simplemente cree un archivo vacío *.drawio , *.drawio.svg o *.drawio.png y ábralo.
  • .drawio.svg son archivos .svg válidos que se pueden incrustar en archivos de lectura de GitHub. No se necesita exportación.
  • .drawio.png son archivos .png válidos! No se necesita exportación. Deberías usar .svg siempre que sea posible, ¡se ven mucho mejor!
  • Para convertir entre diferentes formatos, use el comando Draw.io: Convert To...
• Utiliza una versión fuera de línea de Draw.io de forma predeterminada.
• Múltiples temas de dibujo están disponibles.
• Use Liveshare para editar colaborativamente un diagrama con otros.
• Los nodos/bordes se pueden vincular con los tramos de código.

Manifestación

¿Le gusta hasta ahora? ¡También le puede gustar mi extensión de código abierto Chrome que mejora el editor de Markdown de GitHub!

Edición .Drawio.svg/.Drawio.png archivos

Puede editar y guardar directamente los archivos .drawio.svg y .drawio.png . Estos archivos son perfectamente válidas de SVG/PNG-Images que contienen un diagrama de sorteo incrustado. Cada vez que edita dicho archivo, la parte SVG/PNG de ese archivo se mantiene actualizado.

¡El logotipo de esta extensión es un archivo .drawio.png que se ha creado con la extensión misma!

Si las diferencias son importantes para usted, debe preferir .drawio y evitar diagramas .drawio.png .

Editar o presentar diagramas colaborativamente

Con la versión 1.0 de esta extensión, se ha agregado un amplio soporte para VS Code Liveshare. ¡Ahora puede editar o presentar sus diagramas de dibujo de forma remota, al ver el cursor y la selección de cada participante! Esto se puede usar para discutir, revisar o hacer una lluvia de ideas. Con la herramienta de dibujo a mano alzada y el soporte de látex integrado, esta extensión se convierte en una solución avanzada de pizarra que se puede utilizar para entrevistas de código remoto.

Internamente, esta extensión sincroniza diagramas de dibujo con documentos de texto. Estos documentos de texto son compartidos por Liveshare. Como Liveshare no comprende el texto, los conflictos de modificación pueden ocurrir en modificaciones simultáneas.

Función de enlace de código

En la barra de estado, puede habilitar o deshabilitar la función de enlace de código. Si está habilitado y hace doble clic en un nodo cuya etiqueta comienza con # , realizará una búsqueda en el espacio de trabajo para un símbolo que coincida con el resto de la etiqueta.

Si tiene un nodo etiquetado #MyClass y una clase de nombre MyClass , saltará a su fuente si hace doble clic en el nodo.

Tenga en cuenta que debe abrir al menos un archivo del proyecto que contenga el símbolo. De lo contrario, VS Code no considerará este proyecto al buscar símbolos. Sin embargo, este archivo en sí no tiene que contener el símbolo.

Gracias a mis últimos patrocinadores de GitHub, esta característica es de código abierto y ahora está disponible gratuitamente.

Consejo : si abre el editor sorteo.io al lado derecho (es decir, la segunda columna del editor) y navega a un símbolo, el diagrama se mantendrá visible.

Temas

Temas disponibles de dibujo.

• Tema "Atlas"

  

• Tema "Kennedy"

  

• Tema "Min"

  

• Tema "oscuro"

  

Asociar archivos .svg con el editor Draw.io

Por defecto, esta extensión solo maneja *.drawio.svg Archivos. Agregue esto a su archivo settings.json de código VS. Json si desea asociarlo con archivos .svg :

 "workbench.editorAssociations" : {
    "*.svg" : " hediet.vscode-drawio-text " ,
}

Sin embargo, no podrá editar archivos SVG arbitrarios, ¡solo los que se han creado con Draw.io o esta extensión!

Editar el diagrama y su XML lado a lado

Puede abrir el mismo archivo *.drawio con el editor sorte.io y como el archivo XML. Están sincronizados, por lo que puede cambiar entre ellos como le gusta. Esto es súper práctico si desea usar Find/Reemplazar para cambiar el nombre de texto u otras características del código VS para acelerar su proceso de creación/edición de diagrama. Use la View: Reopen Editor With... comando para alternar entre el texto o el editor Draw.io. Puede abrir múltiples editores para el mismo archivo. Sin embargo, esto no tiene mucho sentido para los archivos SVG, ya que el diagrama Draw.io se almacena en sus metadatos.

Colaboradores

• Henning Dieterichs, Hediet en Github (colaborador principal / autor)
• Vincent Rouillé, Speed37 en Github

Ver también / Extensiones similares

• Draw.io: esta extensión se basa en el trabajo gigante de sorteos. ¡Su característica de incrustación permite esta extensión! Esta extensión agrupa una versión reciente de Draw.io.
• VScode-Drawio por octavos cientos.

Otras extensiones geniales

Si te gusta esta extensión, es posible que también te gusten mis otras extensiones:

• Visualizador de depuración : una extensión para visualizar las estructuras de datos mientras depuración.
• Depuración en tiempo real : esta extensión visualiza cómo se está ejecutando su código.