Mitteilung der D2-Diagrammunterstützung in VPasCode: Der ultimative kostenlose D2-Editor und Online-D2-Tool

Wir freuen uns, eine wichtige Aktualisierung von VPasCode: vollständige Unterstützung für die D2Diagramm-as-Code-Sprache! Mit diesem Update können Architekten, Entwickler und technische Redakteure deklarative D2-Textskripte sofort in saubere, professionelle visuelle Diagramme ohne jegliche Hürden umwandeln.

Unabhängig davon, ob Sie komplexe Cloud-Architekturen, Mikroservices-Topologien oder organisatorische Abläufe darstellen, fungiert VPasCode als Ihr bevorzugter kostenloser D2-Editor und leistungsstarker Online-D2-Tool. Erleben Sie nahtlose, Echtzeit-Visualisierung direkt in Ihrem Browser.

Um mehr über unsere Plattformfunktionen und Aktualisierungen zu erfahren, besuchen Sie die offizielle VPasCode-Seite.

So funktioniert die D2-Integration in VPasCode

Die Verwendung von D2 in VPasCode ist schnell, intuitiv und darauf ausgelegt, Ihre Produktivität zu maximieren. Die Arbeitsumgebung verfügt über eine praktische Seiten-zu-Seite-Anordnung:

• Linke Leiste (Code-Editor):Fügen Sie einfach Ihren D2-Code ein, tippen Sie ihn ein oder bearbeiten Sie ihn. Die automatische Format-Erkennung von VPasCode erkennt Ihren Code sofort, ohne dass Sie manuell die Sprache wechseln müssen.
• Rechte Leiste (Live-Visualisierer):Beobachten Sie, wie Ihr Diagramm dynamisch in Echtzeit gerendert wird, während Sie Text eingeben oder Codeblöcke ändern.

Das Video unten zeigt Ihnen, wie Sie ein D2-Diagramm im Visual Paradigm VPasCode-Diagramm-as-Code-Editor erstellen.

Bereit, es selbst auszuprobieren? Springen Sie direkt in die Aktion mit unserem VPasCode-Editor.

Wichtige Funktionen im Rahmen der D2-Unterstützung

Abgesehen von der Echtzeit-Visualisierung bietet unsere neue D2-Integration vielseitige Zusammenarbeits- und Exportoptionen, die sich ideal in Ihren Arbeitsablauf einfügen:

1. Flexible Exportoptionen: Laden Sie Ihre fertigen Diagramme sofort als skalierbare SVG-Vektorgrafiken oder hochauflösende PNG-Bilder für Berichte, Präsentationen und Dokumentation herunter.

   

2. Integration der Zwischenablage:Kopieren Sie Ihre gerenderte Diagrammbild schnell und einfach mit einem Klick direkt in Ihre Zwischenablage, um es direkt in Slack, E-Mails oder Textverarbeitungsprogramme einzufügen.
3. Sofortige URL-Teilung:Teilen Sie Ihre Arbeit problemlos mit Kollegen oder Kunden über direkte Hyperlinks. Am besten ist, dass für Betrachter keine Anmeldung erforderlich ist, um Ihre geteilten Diagramme anzusehen.

Demonstration: Erstellen eines grundlegenden Netzwerkdigramms in D2

Um zu sehen, wie einfach es ist, Systeme mit diesem kostenlosen D2-Editor, betrachten Sie das folgende Beispiel einer grundlegenden mehrschichtigen Netzarchitektur.

D2-Quellcode

direction: right
client -> load_balancer: HTTPS
load_balancer -> app1: HTTP
load_balancer -> app2: HTTP
app1 -> redis: GET
app2 -> redis: GET
app1 -> postgres: SQL
app2 -> postgres: SQL
client.shape: person
load_balancer.shape: rectangle
app1.shape: hexagon
app2.shape: hexagon
redis.shape: cylinder
postgres.shape: cylinder
redis.style.fill: "#fee2e2"
postgres.style.fill: "#dcfce7"

Wie dies in unserem Online-D2-Tool gerendert wird

Wenn Sie den obigen Skript in VPasCode einfügen, verarbeitet die Engine die Beziehungen, Richtung und benutzerdefinierte Formen automatisch:

• Der clientwird als eindeutiges Personen-Symbol gestaltet, das HTTPS-Anfragen an ein rechteckiges load_balancer.
• Der Datenverkehr teilt sich klar auf zwei sechseckige Anwendungs-Knoten (app1 und app2).
• Beide Anwendungs-Knoten fragen sicher die Backend-Caching-Ebenen (redis, gestaltet in einem weichen roten Ton) und relationale Datenbanken (postgres, gestaltet in einem weichen grünen Ton).

Weitere D2-Diagramm-Beispiele

Grundformen

server -> client: HTTP
server -> db: Abfrage
client: {
  shape: person
  style.fill: "#cfe2ff"
}
db: {
  shape: Zylinder
  style.fill: "#d1e7dd"
}
server.style.fill: "#fff3cd"

Container

network: {
  web: {
    shape: Sechseck
    style.fill: "#e7f1ff"
  }
  api: {
    shape: Rechteck
    style.fill: "#fff3cd"
  }
  db.primary: {
    shape: Zylinder
    style.fill: "#d1e7dd"
  }
  db.cache: {
    shape: Zylinder
    style.fill: "#f8d7da"
  }
  web -> api: REST
  api -> db.primary: SQL
  api -> db.cache: Abfrage
}

Stilisiert

vars: {
  d2-config: {
    skizze: true
    layout-engine: elk
  }
}
aws: {
  vpc: {
    web: {
      shape: Rechteck
      style: {
        fill: "#fef3c7"
        stroke: "#d97706"
        stroke-width: 2
        font: mono
      }
    }
    api: {
      shape: Rechteck
      style.fill: "#dbeafe"
    }
    db: {
      shape: Zylinder
      style.fill: "#dcfce7"
    }
  }
}
user -> aws.vpc.web: HTTPS {
  style.animated: true
}
aws.vpc.web -> aws.vpc.api: HTTP
aws.vpc.api -> aws.vpc.db: SQL {
  style.stroke-dash: 5
}

Sequenz

shape: sequenz_diagramm
user -> api: GET /users
api -> db: SELECT *
db -> api: Zeilen
api -> user: 200 OK
user -> api: POST /users
api -> db: Einfügen
db -> api: Zeile
api -> user: 201 Erstellt

Hinweise: Sie möchten möglicherweise ein Sequenzdiagramm mit PlantUML erstellen. Sehen Sie nach, wie dies geht unter:

Komplette Anleitung zu PlantUML-Sequenzdiagrammen: Syntax, Beispiele und Best Practices

Was ist VPasCode?

Wenn Sie neu bei unserer Plattform sind, Visual Paradigm VPasCode ist eine einheitliche, browserbasierte Diagramm-as-Code-Lösung, entwickelt für moderne technische Teams. Sie beseitigt die Umstände manueller Zieh- und Ablege-Tools, indem sie es Ihnen ermöglicht, Architektur- und Datenmodelle vollständig über Code zu definieren.

Zusätzlich zu D2 unterstützt VPasCode eine große Auswahl an beliebten Diagrammformate und strukturierten Sprachen, darunter PlantUML, Mermaid, Graphviz, ECharts, SQL, YAML, JSON, und große Programmiersprachen wie Java, Python, Rust, und TypeScript. Die Kernfunktionen zum Codebearbeiten, Echtzeitanzeige und Bildexport sind vollständig kostenlos.

Heute loslegen

Verbessern Sie heute Ihre technische Dokumentation und architektonische Modellierung. Erleben Sie die Geschwindigkeit und Bequemlichkeit unserer neuen D2-Funktionen, indem Sie die Anwendung jetzt direkt auf der VPasCode Editor.