VPasCodeにおけるD2図のサポートを発表：究極の無料D2エディタおよびオンラインD2ツール

私たちは、大きなアップデートを発表することを大変嬉しく思いますVPasCode：D2図としてのコード言語！このアップデートにより、アーキテクト、開発者、技術文書作成者は、宣言的なD2テキストスクリプトを、すばやく、スムーズに、クリーンでプロフェッショナルな視覚的図に変換できます。

複雑なクラウドアーキテクチャ、マイクロサービスのトポロジー、または組織のワークフローを設計している場合でも、VPasCodeはあなたの最適な無料D2エディタ および機能豊富なオンラインD2ツール。ブラウザ内ですべての操作をリアルタイムで、スムーズに体験できます。

プラットフォームの機能や最新情報について詳しく知りたい場合は、公式VPasCodeページ.

VPasCodeにおけるD2統合の仕組み

VPasCodeでD2を使用すると、高速で直感的で、生産性を最大限に引き出すように設計されています。ワークスペースは便利な左右並べ表示を採用しています：

• 左ペイン（コードエディタ）：D2スクリプトを簡単に貼り付けたり、入力したり、編集したりできます。VPasCodeの自動フォーマット検出機能により、手動での言語切り替えなしに、即座にコードを認識します。
• 右ペイン（ライブビジュアライザー）：コードを入力したり、コードブロックを編集したりするたびに、図がリアルタイムで動的にレンダリングされる様子を確認できます。

以下の動画では、Visual Paradigm VPasCodeの図としてのコードエディタでD2図を作成する方法を紹介しています。

実際に試してみたいですか？私たちのVPasCodeエディタ.

D2サポートに含まれる主な機能

ライブレンダリング以上の機能を備え、さまざまなコラボレーションおよび出力オプションがD2統合に組み込まれており、あなたのワークフローに最適です：

1. 柔軟なエクスポートオプション：レポート、プレゼンテーション、ドキュメント用に、スケーラブルなSVGベクターグラフィックスまたは高解像度PNG画像として、すぐに図をダウンロードできます。

   

2. クリップボード統合：1回のクリックで、レンダリングされた図をクリップボードに素早くコピーし、Slackやメール、ワードプロセッサに直接貼り付けることができます。
3. 即時URL共有：直接のハイパーリンクを使って、同僚やクライアントと簡単に作業を共有できます。さらに、視聴者が共有された図を確認するにはログインが不要です。

デモ：D2で基本的なネットワーク図を作成する方法

この無料のD2エディタを使ってシステムをモデル化する簡単さを確認するには、以下の基本的なマルチティアネットワークアーキテクチャの例を検討してください。

D2ソースコード

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"

この内容がオンラインD2ツールでどのようにレンダリングされるか

上記のスクリプトをVPasCodeに貼り付けると、エンジンが関係性、方向性、カスタム形状のスタイルを自動的に処理します：

• このclientは、長方形のload_balancer.
• トラフィックは、2つの六角形のアプリケーションノード（app1とapp2).
• 両方のアプリケーションノードは、バックエンドのキャッシュレイヤー（redis、やや赤みがかった色調でスタイル設定）とリレーショナルデータストア（postgres、やや緑みがかった色調でスタイル設定）を安全に照会します。

D2図のその他の例

基本的な形状

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

コンテナ

network: {
  web: {
    shape: hexagon
    style.fill: "#e7f1ff"
  }
  api: {
    shape: rectangle
    style.fill: "#fff3cd"
  }
  db.primary: {
    shape: cylinder
    style.fill: "#d1e7dd"
  }
  db.cache: {
    shape: cylinder
    style.fill: "#f8d7da"
  }
  web -> api: REST
  api -> db.primary: SQL
  api -> db.cache: lookup
}

スタイル付き

vars: {
  d2-config: {
    sketch: true
    layout-engine: elk
  }
}
aws: {
  vpc: {
    web: {
      shape: rectangle
      style: {
        fill: "#fef3c7"
        stroke: "#d97706"
        stroke-width: 2
        font: mono
      }
    }
    api: {
      shape: rectangle
      style.fill: "#dbeafe"
    }
    db: {
      shape: cylinder
      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
}

シーケンス

shape: sequence_diagram
user -> api: GET /users
api -> db: SELECT *
db -> api: rows
api -> user: 200 OK
user -> api: POST /users
api -> db: INSERT
db -> api: row
api -> user: 201 Created

メモ：PlantUMLでシーケンス図を作成したい場合があります。その方法については以下をご覧ください：

PlantUMLシーケンス図の完全ガイド：構文、例、ベストプラクティス

VPasCodeとは何ですか？

当プラットフォームに初めてお使いの方は、Visual Paradigm VPasCodeは、現代の技術チーム向けに設計された統合型で、ブラウザベースの図をコードで記述するソリューションです。手動のドラッグアンドドロップ型の図作成ツールの面倒を解消し、アーキテクチャやデータモデルを完全にコードで定義できるようにします。

D2に加えて、VPasCodeはPlantUML、Mermaid、Graphvizなど、多数の一般的な図作成フォーマットや構造化言語をサポートしています。ECharts, SQL, YAML, JSON、および、Java, Python, Rust、およびTypeScript。コアコード編集、ライブプレビュー、画像エクスポートはすべて無料です。

今日から作成を開始しましょう

今日から技術文書の改善とアーキテクチャモデリングを進めましょう。今すぐアプリケーションを起動して、新しいD2機能の高速性と利便性を体験してください。VPasCodeエディタ.