Anunciamos el soporte para diagramas D2 en VPasCode: el editor D2 gratuito definitivo y la herramienta en línea D2

Estamos encantados de anunciar una actualización importante para VPasCode: soporte completo para el D2lenguaje de diagramas como código. Con esta actualización, arquitectos, desarrolladores y redactores técnicos pueden transformar instantáneamente scripts de texto declarativos D2 en diagramas visuales limpios y profesionales sin ninguna fricción.

Ya sea que estés mapeando arquitecturas de nube complejas, topologías de microservicios o flujos de trabajo organizacionales, VPasCode funciona como tu editor D2 gratuito de eleccióneditor D2 gratuito y herramienta en línea con muchas funcionesherramienta en línea D2. Experimenta una visualización fluida y en tiempo real directamente dentro de tu navegador.

Para obtener más información sobre las capacidades y actualizaciones de nuestra plataforma, visita la página oficialPágina de VPasCode.

Cómo funciona la integración de D2 en VPasCode

Usar D2 en VPasCode es rápido, intuitivo y diseñado para maximizar tu productividad. El entorno de trabajo presenta una disposición conveniente de lado a lado:

• Panel izquierdo (editor de código):Simplemente pega, escribe o edita tu script D2. La detección automática de formato de VPasCode reconoce inmediatamente tu código sin necesidad de cambiar manualmente el idioma.
• Panel derecho (visualizador en vivo):Observa cómo tu diagrama se renderiza dinámicamente en tiempo real mientras escribes o modificas bloques de código.

El video de abajo te muestra cómo crear un diagrama D2 en el editor de diagramas como código de Visual Paradigm VPasCode.

¿Listo para probarlo tú mismo? Empieza de inmediato con nuestroEditor de VPasCode.

Características principales incluidas con el soporte para D2

Más allá de la visualización en tiempo real, nuestra nueva integración de D2 incluye opciones versátiles de colaboración y salida para adaptarse a tu flujo de trabajo:

1. Opciones flexibles de exportación:Descarga tus diagramas terminados de inmediato como gráficos vectoriales escalables SVG o imágenes PNG de alta resolución para informes, presentaciones y documentación.

   

2. Integración con el portapapeles:Copie rápidamente su imagen de diagrama renderizada directamente en su portapapeles con un solo clic para pegar directamente en Slack, correos electrónicos o procesadores de textos.
3. Compartir enlaces instantáneos:Comparta su trabajo sin esfuerzo con colegas o clientes mediante enlaces directos. Lo mejor de todo es que no se requiere inicio de sesión para que los espectadores revisen sus diagramas compartidos.

Demostración: Creación de un diagrama de red básico en D2

Para ver lo sencillo que es modelar sistemas utilizando este editor D2 gratuito, considere el siguiente ejemplo de una arquitectura de red básica de múltiples niveles.

Código fuente D2

dirección: derecha
cliente -> balanceador_de_carga: HTTPS
balanceador_de_carga -> app1: HTTP
balanceador_de_carga -> app2: HTTP
app1 -> redis: GET
app2 -> redis: GET
app1 -> postgres: SQL
app2 -> postgres: SQL
cliente.forma: persona
balanceador_de_carga.forma: rectángulo
app1.forma: hexágono
app2.forma: hexágono
redis.forma: cilindro
postgres.forma: cilindro
redis.estilo.relleno: "#fee2e2"
postgres.estilo.relleno: "#dcfce7"

Cómo se representa esto en nuestra herramienta en línea D2

Cuando pega el script anterior en VPasCode, el motor procesa automáticamente las relaciones, la direccionalidad y el estilo personalizado de las formas:

• El clientetiene un estilo de ícono de persona distintivo que inicia solicitudes HTTPS hacia un balanceador_de_carga.
• El tráfico se divide claramente entre dos nodos de aplicación hexagonales (app1 y app2).
• Ambos nodos de aplicación consultan de forma segura capas de almacenamiento en caché de fondo (redis, con estilo en tono suave rojo) y almacenes de datos relacionales (postgres, con estilo en tono suave verde).

Más ejemplos de diagramas D2

Formas básicas

servidor -> cliente: HTTP
servidor -> bd: consulta
cliente: {
  forma: persona
  estilo.relleno: "#cfe2ff"
}
bd: {
  forma: cilindro
  estilo.relleno: "#d1e7dd"
}
estilo.relleno.servidor: "#fff3cd"

Contenedores

red: {
  web: {
    forma: hexágono
    estilo.relleno: "#e7f1ff"
  }
  api: {
    forma: rectángulo
    estilo.relleno: "#fff3cd"
  }
  bd.principal: {
    forma: cilindro
    estilo.relleno: "#d1e7dd"
  }
  bd.caché: {
    forma: cilindro
    estilo.relleno: "#f8d7da"
  }
  web -> api: REST
  api -> bd.principal: SQL
  api -> bd.caché: búsqueda
}

Con estilo

vars: {
  d2-config: {
    boceto: true
    motor-de-disposición: elk
  }
}
aws: {
  vpc: {
    web: {
      forma: rectángulo
      estilo: {
        relleno: "#fef3c7"
        trazo: "#d97706"
        ancho-trazo: 2
        fuente: mono
      }
    }
    api: {
      forma: rectángulo
      estilo.relleno: "#dbeafe"
    }
    bd: {
      forma: cilindro
      estilo.relleno: "#dcfce7"
    }
  }
}
usuario -> aws.vpc.web: HTTPS {
  estilo.animado: true
}
aws.vpc.web -> aws.vpc.api: HTTP
aws.vpc.api -> aws.vpc.bd: SQL {
  estilo.trazo-punteado: 5
}

Secuencia

forma: diagrama_secuencia
usuario -> api: GET /usuarios
api -> bd: SELECT *
bd -> api: filas
api -> usuario: 200 OK
usuario -> api: POST /usuarios
api -> bd: INSERT
bd -> api: fila
api -> usuario: 201 Creado

Notas: Es posible que desees crear un diagrama de secuencia con PlantUML. Consulta cómo hacerlo en:

Guía completa sobre diagramas de secuencia de PlantUML: sintaxis, ejemplos y mejores prácticas

¿Qué es VPasCode?

Si eres nuevo en nuestra plataforma, Visual Paradigm VPasCodees una solución unificada, basada en navegador, de diagramas como código, diseñada para equipos técnicos modernos. Elimina la molestia de las herramientas de dibujo manuales con arrastrar y soltar, permitiéndote definir arquitecturas y modelos de datos completamente mediante código.

Además de D2, VPasCode admite una amplia variedad de formatos de diagramas populares y lenguajes estructurados, incluyendo PlantUML, Mermaid, Graphviz, ECharts, SQL, YAML, JSON, y lenguajes de programación principales como Java, Python, Rust, y TypeScript. La edición de código principal, la vista previa en tiempo real y la exportación de imágenes son completamente gratuitas.

Empiece a crear hoy

Mejore su documentación técnica y modelado arquitectónico hoy. Experimente la velocidad y comodidad de nuestras nuevas capacidades D2 iniciando la aplicación ahora mismo en el Editor VPasCode.