60秒で始めるVPasCodeクイックスタートガイド

以下の内容で始めましょう：Visual Paradigm VPasCode1分未満で始められます。このプラットフォームは完全にクラウドネイティブであるため、JavaランタイムのインストールやNode.jsモジュールの設定、重いIDE拡張機能のダウンロードは必要ありません。テキストの構文から高精細なビジュアル図まで、3つの簡単なステップで移行できます。

図としてのコード（DaC）の最初のアセットを作成・カスタマイズ・共有するため、このクイックウォークスルーに従ってください。

ステップ1：ライブエディタを開く

無料のVPasCodeプレイグラウンドにアクセスしてください。デフォルトでは、モダンで二画面構成のインターフェースが表示されます：

• 左パネル（コードエディタ）：自動構文強調、行番号、リアルタイムエラーチェック機能を備えた軽量で高性能なテキストエディタ。
• 右パネル（ライブプレビュー窓）：テキスト表現を入力または編集するたびに、視覚的なレイアウトを自動で更新するリアルタイム図描画エンジン。

ステップ2：エンジンを選択してブループリントを貼り付けます

VPasCodeは自動的に構文を認識します。実際に動作を確認するには、左パネルのプレースホルダーテキストをすべて削除し、以下のベースライン例のいずれかをエディタにコピー＆ペーストしてください：

オプションA：Markdownフローチャート（Mermaid構文）

アジャイルで上から下へのフローチャートレイアウトを好む場合は、以下のシンプルなブロックを使用してください：

graph TD
    A[クライアントリクエスト] --> B{APIゲートウェイ}
    B --> |有効なトークン| C[認証サービス]
    B --> |無効なトークン| D[アクセス拒否]
    C --> E[(ユーザーDB)]

オプションB：ソフトウェアアーキテクチャコンポーネント（PlantUML構文）

構造化されたシステムコンポーネントを明確な境界でマッピングしたい場合は、以下のブロックを使用してください：

@startuml
package "アプリケーション層" {
    [Webアプリ] -right-> [APIゲートウェイ]
}
database "データストレージ" {
    [APIゲートウェイ] --> [SQLメイン]
    [APIゲートウェイ] ..> [Redisキャッシュ] : "読み取り最適化"
}
@enduml

コードを貼り付けた瞬間、右パネルはすぐにテキストをコンパイルし、クリーンで正確に整列されたビジュアル図を表示します。

ステップ3：作業をエクスポートして共有する

レイアウトに満足したら、インターフェース上部にあるワークスペースコントロールバーを使って、すぐに文書をエクスポートまたは共有できます：

1. 共有可能なURLをコピー: をクリックして共有ボタンをクリックして即座にリンクを生成してください。VPasCodeはゼロデータベースの状態シリアライズを使用しており、図のすべてのテキストがURLハッシュに安全に圧縮されます。リンクをクリックした人は、即座に正確なコードモデルを表示および編集できます。
2. 高解像度ベクターファイル（SVG）をダウンロード: をクリックしてSVGをエクスポートボタンをクリックしてスケーラブルなベクターアセットをダウンロードしてください。これはGitリポジトリ、チームのWiki、または内部エンジニアリングのMarkdownドキュメントファイルにきれいに埋め込むのに最適です。
3. 静止画像（PNG）をダウンロード: をクリックしてPNGをエクスポート高解像度のスナップショットを取得し、SlackやMicrosoft Teams、デザインプレゼンテーションにそのまま挿入できます。

最初のアセットをレンダリングしたので、次のドキュメントのセクションを確認して、個別のPlantUML Playbook, Mermaid Playbook、およびGraphviz Playbookデザイン手法を習得しましょう！