de_DEen_USes_ESfa_IRfr_FRid_IDjapl_PLpt_PTru_RUvizh_CNzh_TW

VPasCode：包括的全面ガイド

VPasCodeは、図を作成し構造化テキストを可視化するためのブラウザベースのエディタです。サポートされている形式でコードを書いたり生成したりし、ライブプレビューで結果を確認した後、図を共有またはエクスポートできます。複数のテキストから図への変換エンジンやコード・データ形式を一つのワークスペースに統合しています。

VPasCode：はじめに

VPasCodeの入門ガイド：5つのステップ（エディタを開く、形式を選択する、コードを入力する、プレビューを確認する、図を共有またはエクスポートする）を示しています。

  1. VPasCodeエディタを開きます。

  2. 形式を選択するか、組み込みの例のいずれかから始めます。

  3. エディタに図のコードを入力するか、貼り付けます。

  4. ライブレンダリングされたプレビューを確認し、必要に応じてコードを調整します。

  5. リンクで図を共有するか、他の場所で使用するためにエクスポートします。

エディタは無料でブラウザベースであると説明されているため、デスクトップの図作成アプリケーションをインストールせずに作業できます。

VPasCode：サポートされている形式と図の種類

VPasCodeは、複数の図作成言語、データ形式、およびプログラミング言語をサポートしています。

VPasCodeのインフォグラフィック：PlantUML、Mermaid、Graphviz、D2、データスキーマ、プログラミング言語など、サポートされている図の種類と形式を表示しています。

  • PlantUML：ArchiMate、C4モデル、シーケンス、ユースケース、クラス、オブジェクト、アクティビティ、コンポーネント、デプロイメント、状態およびタイミング図；ERD、Chen ERD、ネットワークレイアウト、および作業分解構造。

  • Mermaid：フローチャート、クラスおよびシーケンス図、ERD、状態図、マインドマップ、C4モデル、ガントチャート、四象限および要件図、タイムライン、ユーザージャーニー、Gitグラフ、およびカンバンボード。

  • Graphviz：有向および標準グラフ、フローチャート、組織図、クラスタ図、およびデータフロー図。

  • D2：基本形状、コンテナ、シーケンス図、スタイル付き図、およびネットワーク図。

  • データおよびスキーマ：SQL、DBML、JSON、JSON Schema、JSONC、JSON5、JSONL/NDJSON、TOON、YAML、XML、CSV、およびTOML。

  • コード：Java、TypeScript、Go、Rust、C#、Python、C、C++、PHP、Ruby、Scala、Zig、Kotlin、Swift、およびElixir。

この記事では、今後のアップデートで追加の形式が追加される可能性があることに言及しています。

VPasCode：図の作成

以下の2つの方法のいずれかで始めることができます：

  • 自分でコードを書く：サポートされている形式を選択し、その構文をエディタに入力します。

  • 例から始める：組み込みの例を閲覧して形式を学んだり、テンプレートを自分の図に合わせて適応させたりします。

編集する際、VPasCode はライブプレビューをレンダリングします。これにより、別々のエクスポートステップを待つことなく、作業中にレイアウトや構文の問題を早期に発見できます。

VPasCode: AI ツールの活用

VPasCode の AI 機能は、図のコード作成と洗練をサポートします：

VPasCodeのAIツールインフォグラフィック：4つの機能（テキストから図を生成する、既存の図を修正する、コードエラーを修正する、ラベルを翻訳する）を示しています。

  • 図の生成：システムやプロセスを平易な英語で記述すると、AI が選択した形式のコードを生成します。

  • 図の修正：既存の図を拡張、簡略化、またはその他の方法で調整するための指示を与えます。

  • コードエラーの修正：AI の支援を使用して、図の構文問題を検出および修正します。

  • ラベルの翻訳：翻訳機能を使用して、図内のテキストラベルを別の言語に変換します。

これらのツールは、手動での構文作業を削減することを目的としています。共有する前に、生成または修正されたコードを確認し、結果をプレビューしてください。

VPasCode: PlantUML テーマ

PlantUML 図の場合、エディタはテーマ選択インターフェースを提供します。利用可能なリストからテーマを選択してその構文を適用し、更新された外観をプレビューできます。本記事では、カスタムの Visual Paradigm テーマと Rose テーマも紹介しています。前者は青いヘッダーを使用し、後者はクラシックな薄黄色の IBM Rational Rose の外観を基にしています。

VPasCode: 共有とエクスポート

図が完成したら、以下が可能です：

  • 共有可能なウェブリンクを作成します。

  • ベクトル PDF としてエクスポートします。

  • SVG ベクトル画像としてエクスポートします。

  • 高解像度 PNG としてエクスポートします。

SVG や PDF などのベクトル形式は、図を拡大縮小しても鮮明さを保ちたい場合に便利です。一方、PNG は一般的な文書やプレゼンテーションに便利です。

VPasCode: AI プロバイダーの接続

組織のAIインフラストラクチャを、既存のAPI認証情報を使用してOpenAIやAnthropicなどのプロバイダーに接続するVPasCodeの図。

組織は独自の AI インフラストラクチャを接続し、既存の API 認証情報を使用できます。本記事では、OpenAI、Anthropic、Google、DeepSeek、Mistral、Qwen、Groq など、多くのプロバイダーをリストアップしています。このオプションは、AI 環境、認証情報、および支出管理に対する制御を提供することを目的としており、組織の要件に合わせて設定してください。

VPasCode: 実践的なワークフロー

形式選択、AI生成、コード編集、プレビュー、テーマ設定、エクスポートオプションを示す7段階のVPasCodeワークフロー図。

  1. ユースケースに合った図の形式を選択します。

  2. 組み込みの例から始めるか、AI 生成器に図を記述します。

  3. 生成されたコードを検査および編集します。

  4. ライブプレビューを使用して、可読性と正確性を確認します。

  5. PlantUML で作業している場合は、テーマを適用します。

  6. 必要に応じて、AI による修正、エラー修正、または翻訳を利用します。

  7. リンクを共有するか、完成した図をエクスポートしてください。

VPasCodeは、テキストベースの図編集を好む場合、複数の図形式で作業する必要がある場合、またはすべての形状を手動で配置せずに図を素早く生成・修正したい場合に最も役立ちます。