Read this post in: en_USes_ESfr_FRid_IDpl_PLpt_PTru_RUzh_CNzh_TW

VPasCode を使用して、編集可能なダイアグラムを Visual Paradigm OpenDocs に取り込む

EDITION REQUIRED|
DESKTOPProfessional
VP ONLINECombo

Visual Paradigm は、以下の重要な機能強化を発表できることを嬉しく思います:Visual Paradigm OpenDocs: ユーザーは、以下の統合を通じて、編集可能なダイアグラムを文書ページに直接作成して挿入できるようになりました:Visual Paradigm VPasCode.

この新機能により、ドキュメント作成と図面作成が一つの効率的なワークフローで連携します。以前は別アプリケーションで図を作成し、画像としてエクスポートして、手動で文書に配置する必要がありましたが、現在は「コードとしての図(diagram-as-code)」で図を作成し、OpenDocs に挿入して、必要に応じていつでも編集用に開くことができます。

その結果、ソフトウェアチーム、技術ライター、アーキテクト、ビジネスアナリスト、プロダクトマネージャー、および複雑な概念を視覚的に説明する必要があるすべての人にとって、より柔軟なナレッジ管理ツールが実現します。

Visual Paradigm OpenDocs を開くして、編集可能なダイアグラムを使ったドキュメント作成を今日から始めましょう。

VPasCodeを使用してVisual Paradigm OpenDocsで図を作成、挿入、編集する方法を示すインフォグラフィック

Visual Paradigm OpenDocs の新機能とは?

OpenDocs では、VPasCode 統合を通じて、ページにダイアグラムを挿入できるようになりました。ダイアグラムはテキストカーソルの位置に追加され、挿入後も再度編集可能です。

これは、ダイアグラムが執筆完了後に追加される静的な画像に限定されなくなったことを意味します。ダイアグラムは、説明、コラボレーション、計画、分析、ナレッジ共有を支援する、文書内のアクティブで編集可能な部分となることができます。

ソフトウェア要件定義書の作成、社内プロジェクトウィキの構築、システムアーキテクチャの文書化、プロセスガイドの公開、製品ナレッジベースの構築など、どのような用途であっても、現在は同じ文書内でテキストコンテンツと視覚モデルを組み合わせることができます。

この機能強化が重要な理由

明確な説明とダイアグラムを組み合わせることで、文書はより有用になります。テキストによる記述は文脈と詳細を提供し、一方、ダイアグラムは読者が関係性、順序、依存関係、構造、ワークフローを一瞥で理解するのを助けます。

しかし、ドキュメント内でダイアグラムを作成・維持することは不便な場合があります。一般的なワークフローでは、1 つのツールでダイアグラムを作成し、結果を PNG または SVG ファイルとしてエクスポートし、画像を文書にアップロードし、ダイアグラムが変更されるたびにこのプロセスを繰り返します。これにより不要な作業が発生し、古いビジュアル、重複するファイル、または最新バージョンがどれかという混乱を招く可能性があります。

OpenDocs と VPasCode の統合により、ダイアグラム作成をドキュメントワークフローに近づけることで、この摩擦を軽減します。ユーザーは必要な場所でダイアグラムを作成し、ページに挿入し、後で図面エディタに戻って修正を行うことができます。

視覚的な説明を関連するコンテンツの近くに保持する

ダイアグラムは、それが支える説明の隣に表示される場合に最も効果的です。新しい OpenDocs の機能により、ユーザーはフローチャートをプロセス説明の下に配置したり、シーケンスダイアグラムを API 説明の隣に追加したり、システムアーキテクチャダイアグラムを技術仕様書内に含めることができます。

これにより、文書が読みやすくなり、複数のアプリケーション間を行き来することなく、テキスト情報と視覚情報の関係性をユーザーが理解できるようになります。

手動のエクスポートとアップロード作業を削減する

VPasCode は、テキストベースの図記法からダイアグラムを作成し、ブラウザ上で視覚的にレンダリングします。OpenDocs との統合により、ユーザーは画像を手動でダウンロードして文書にアップロードする代わりに、結果を直接ページに挿入できます。

これらの反復的なステップを削減することで、チームは時間を節約し、よりクリーンなドキュメントプロセスを維持できます。特に、開発やプロジェクト計画中にダイアグラムが頻繁に更新される場合に効果的です。

挿入後もダイアグラムを編集可能にする

要件は変化します。システムは進化します。ビジネスプロセスは改訂されます。今日正確にプロジェクトを記述しているダイアグラムも、明日には更新が必要になるかもしれません。

VPasCode を介して挿入されたダイアグラムは編集可能なままなので、ユーザーは OpenDocs からダイアグラムエディタを再度開き、ダイアグラムコードを変更し、変更を保存して、文書内のダイアグラムを更新できます。これにより、アイデアやプロジェクトの発展に伴い、視覚コンテンツをより容易に洗練させることができます。

複数の図面スタイルをサポートする

異なるプロジェクトには、異なる種類の視覚的コミュニケーションが必要です。ソフトウェアアーキテクトは C4 モデルやデプロイメントダイアグラムを必要とするかもしれません。ビジネスアナリストはプロセスフローチャートやユーザージャーニーマップを必要とするかもしれません。プロジェクトマネージャーはガントチャートやロードマップを必要とするかもしれません。技術ライターはマインドマップ、シーケンスダイアグラム、またはエンティティ関係図を必要とするかもしれません。

VPasCode は、PlantUML、Mermaid、Graphviz、D2、Markmap、ECharts を含む、幅広い図面フォーマットと可視化技術をサポートしています。また、視覚的表現を作成するために使用できる構造化データやその他のコードベースフォーマットもサポートしています。

ビジュアルパラダイム VPasCode とは何か?

ビジュアルパラダイム VPasCodeは、テキストベースの説明を書くことで図を作成できるオンラインの「図-as-コード」プラットフォームです。コードエディタとリアルタイムの視覚プレビューを組み合わせ、ユーザーはコードを書いたり変更したりしながら図を即座に確認できます。

ユーザーは手動ですべての図形や接続線を描くのではなく、サポートされている構文を使用して図の構造を記述します。VPasCode はその後、その結果を視覚的な図としてレンダリングします。

このアプローチは、図を迅速かつ反復可能に作成したい開発者、ソフトウェアアーキテクト、技術チーム、およびその他のユーザーにとって特に有用です。また、図をテキストとしてレビューおよび改良したいチームにも役立ちます。

VPasCode には、さまざまな図のタイプとフォーマットのための例が含まれており、新規ユーザーがすぐに使い始めることができます。ユーザーはまた、AI を使用して図のコードを生成し、平易な言語による説明から図のコードを生成できます。

AIを使用してVisual Paradigm VPasCodeで図を生成

サポートされている図および可視化フォーマット

VPasCode を通じて、OpenDocs のユーザーは多くの異なる種類の図や可視化を作成して挿入できます。サポートされているフォーマットには以下が含まれます:

  • PlantUML: クラス図、シーケンス図、ユースケース図、アクティビティ図、コンポーネント図、デプロイメント図、状態図、ER 図、ArchiMate 図、C4 モデル、マインドマップ、ガントチャート、その他多数。
  • Mermaid: フローチャート、クラス図、シーケンス図、エンティティ関係図、状態図、マインドマップ、C4 図、ガントチャート、タイムライン、ユーザージャーニーマップ、Git グラフ、カンバン図、その他多数。
  • Graphviz: グラフ、ネットワーク図、階層図、組織図、および関係の可視化。
  • D2: アーキテクチャ、システム、ワークフロー、および関係のための現代的な宣言型図。
  • Markmap: Markdown 形式のコンテンツから生成されるインタラクティブなマインドマップ。
  • ECharts: データ駆動型のチャートおよび可視化。
  • データおよびスキーマフォーマット: JSON、YAML、XML、CSV、TOML、DBML、および SQL。

このサポートされる技術の範囲により、OpenDocs は、従来のビジネスビジュアルと技術図の両方を作成する必要があるチームにとって、より能力の高いドキュメントプラットフォームとなっています。

AI 支援による図の作成

ユーザーは始める前にすべての図の構文を暗記する必要はありません。VPasCode には、自然言語でのリクエストを図コードに変換するのに役立つ AI 支援による図生成機能が搭載されています。

例えば、ユーザーは以下のようにリクエストできます:

ウェブアプリケーション、認証サービス、およびデータベースを介して顧客がログインする様子を示すシーケンス図を作成してください。

VPasCode はこのリクエストを使用して図コードを生成し、ユーザーはそれをレビュー、調整し、OpenDocs に挿入できます。その後、ユーザーはコードを手動で改良するか、新しい要件に応じて AI に図の変更を依頼できます。

AIを使用してVPasCodeでUMLシーケンス図を生成する方法を示すイラスト

AI の支援は、以下の場合に役立ちます:

  • 何を伝えたいかは分かっているが、必要な構文が分からない場合。
  • 素早く初期の図を作成したい場合。
  • ステップ、コンポーネント、関係、または分岐を追加または削除する必要がある場合。
  • 複雑な図を簡素化したい場合。
  • 図コードの誤りを修正する支援が必要な場合。
  • 国際チーム向けに図のラベルを翻訳したい場合。

AI によって生成された図は編集可能であり、ユーザーは生成結果をスタートポイントとして扱い、プロジェクトの要件に合わせて調整できます。

編集可能な図を OpenDocs ページに挿入する方法

以下の手順に従って、図を作成し、ドキュメントページに挿入してください:

  1. 「Visual Paradigm OpenDocs」を開く.
  2. 新しいページを作成するか、既存のページを開きます。
  3. 「編集」」をページの右上隅でクリックします。

    OpenDocsページを編集する

  4. 図を表示させたい場所にテキストカーソルを置きます。

    OpenDocsページ内にカーソルを配置し、その場所に図を挿入する準備ができた状態

  5. ツールバーの「+」ボタンをクリックして「アーティファクトの作成」」ウィンドウを開きます。

    OpenDocsの挿入ボタンをクリックしました。(OpenDocsに図を挿入しようとしています)

  6. 「VPasCodeから左側のメニューで選択します。
  7. 「VPasCode」を右側でクリックして図描画エディタを開きます。

    VPasCodeで空白の図を作成する

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

    VPasCodeのユーザーインターフェース。左側にはコードエディタ(空)が表示され、右側には利用可能な図の例がリストされています(クリックして読み込み)。

  9. リアルタイムプレビューを確認し、必要な変更を加えます。

    Visual Paradigm VPasCodeでクラス図が作成されました。

  10. 「保存」をVPasCodeエディタの右上隅でクリックします。

    VPasCodeで図を保存する

  11. 「閉じる」をクリックしてOpenDocsページに戻ります。
  12. 図はテキストカーソルの位置に挿入されます。

    クラス図がOpenDocs内に再度埋め込まれました。

図が挿入されると、ユーザーは他のドキュメントコンテンツと同様に、その周囲に引き続き文章を入力できます。

図の再編集方法

OpenDocsに挿入された図は、更新が必要な場合にいつでも編集できます。

  1. 図が含まれているOpenDocsページを開きます。
  2. 図の右上隅にある鉛筆アイコンをクリックします。

    OpenDocsに埋め込まれたクラス図を再度編集する

  3. VPasCodeエディタで変更を加えます。
  4. ライブプレビューを使用して結果を確認します。
  5. 「保存.
  6. 「閉じる」をクリックしてOpenDocsに戻ります。

更新された図はドキュメント内で自動的に更新され、元の図を削除したり最初からやり直したりすることなく、視覚コンテンツを維持できます。

実用的なユースケース

ソフトウェアアーキテクチャのドキュメント作成

ソフトウェアアーキテクトは、PlantUML、Mermaid、D2、または C4 構文を使用して、システムコンポーネント、サービス、データストア、および外部依存関係を記述できます。生成されたアーキテクチャ図は、システム設計ドキュメントやアーキテクチャ意思決定記録に直接配置できます。

アーキテクチャが変更される場合、図は VPasCode で編集され、OpenDocs で更新できます。これにより、技術ドキュメントが議論されている設計と一致した状態を維持するのに役立ちます。

API および統合ドキュメント

シーケンス図は、クライアント、サービス、データベース、およびサードパーティシステムがどのように相互作用するかを示すのに役立ちます。チームは、API 説明、認証詳細、リクエストフロー、エラー処理規則の横にシーケンス図を含めることができます。

例えば、技術ライターは、オンライン決済プロセスを、文章による説明、API 例、および Mermaid または PlantUML のシーケンス図で、同じ OpenDocs ページにドキュメント化できます。

データベースおよびデータモデルドキュメント

データベースチームは、エンティティリレーションシップ図を使用して、テーブル、フィールド、キー、および関係性を説明できます。視覚的なデータモデルは、開発者、アナリスト、テスター、およびその他の関係者にとって、データベースドキュメントを理解しやすくします。

新しいテーブルまたは関係性が追加された場合、図は同じ VPasCode ワークフローで編集し、再挿入できます。

ビジネスプロセスおよびワークフローガイド

ビジネスアナリストおよび運用チームは、フローチャート、アクティビティ図、ユーザージャーニーマップ、およびプロセス図を使用して、業務が組織内をどのように流れるかを説明できます。

これらの視覚要素を運用ガイドまたは標準作業手順書に埋め込むことで、読者が責任、意思決定ポイント、代替経路、および承認手順を理解するのに役立ちます。

製品要件および機能計画

製品マネージャーは、製品要件ドキュメントにユーザージャーニー、プロセスフロー、状態図、マインドマップ、および機能関係を含めることができます。これらの視覚資産は、製品、デザイン、エンジニアリング、および品質保証チームが機能に対する共通の理解を深めるのに役立ちます。

プロジェクトウィキおよびナレッジベース

ナレッジ管理ツールは、人々が業務を理解し遂行するために必要な情報を集約したときに最も価値があります。編集可能な図を OpenDocs ナレッジベースに追加することで、プロジェクトウィキ、オンボーディング資料、内部ガイド、およびシステムマニュアルをより包括的なものにできます。

図を別々のフォルダや接続されていない設計ツールに保存するのではなく、チームは関連する説明、意思決定、手順、および参照資料の横に配置できます。

マインドマップおよび概念整理

Markmap およびその他のマインドマップ形式は、チームが要件、研究トピック、プロジェクト構造、会議の結果、および知識階層を整理するのに役立ちます。これらのマップは、より詳細な情報が提示される前に、OpenDocs ページに挿入して視覚的な概要を提供できます。

異なるユーザータイプへのメリット

  • 開発者: 慣れ親しんだテキストベースの形式で図を作成し、技術的な説明をシステムビジュアルの近くに保持します。
  • ソフトウェアアーキテクト: システムの進化に合わせて修正可能なアーキテクチャ、UML、C4、デプロイメント、およびコンポーネント図を作成します。
  • 技術ライター: 手順、仕様、例、および編集可能な図を一つのドキュメントワークスペースに統合します。
  • ビジネスアナリスト: 明確な視覚モデルを使用して、ビジネスプロセス、要件、意思決定、およびユーザージャーニーを説明します。
  • 製品マネージャー: 製品ドキュメントにワークフロー、ロードマップ、機能関係、およびユーザーフローを追加します。
  • プロジェクトチーム:詳細と全体像の両方を伝える共有ドキュメントを作成してください。
  • 教育者およびトレーナー:技術的または手順に関する内容を理解しやすくするために図を使用してください。

静的ドキュメントから生きたドキュメントへ

効果的なドキュメントは、プロジェクト、製品、プロセス、またはシステムの現在の状態を反映すべきです。視覚コンテンツが静的画像としてのみ保存されている場合、更新を先延ばしにしやすいものです。時間が経つにつれて、その画像はもはや現実を反映しなくなる可能性があります。

OpenDocs と VPasCode の統合は、より保守性の高いアプローチをサポートします。図は読みやすいコードから作成し、視覚プレビューで確認し、関連するドキュメントに挿入し、基盤となる情報が変更された際に再度編集することができます。

これにより、生きたドキュメントのための実用的な基盤が構築されます。図は単なる一度きりのスクリーンショットではなく、有用な作業資産として残ります。

より連携したビジュアルパラダイムエコシステム

ビジュアルパラダイムは、異なる製品と機能を接続し、ユーザーがアイデアからモデル、図、ドキュメント、共有知識へとより効率的に移動できるように支援します。

VPasCode は「図をコードとして」の体験を提供します。OpenDocs はドキュメントおよびナレッジ管理の体験を提供します。これらを組み合わせることで、チームは視覚コンテンツを作成し、必要な文脈に直接配置することができます。

この連携により、ツールの切り替えを減らし、ドキュメントワークフローを簡素化し、プロジェクトのライフサイクル全体を通じてチームが図をより効果的に活用できるようになります。

OpenDocs と VPasCode を始める

この機能強化により、Visual Paradigm OpenDocs は、構造化され、視覚的、かつ協力的なドキュメント作成のためのより多機能な環境となります。ユーザーは PlantUML、Mermaid、Graphviz、D2、Markmap、ECharts、およびその他のサポート形式で図を作成し、ページに挿入し、要件が変更された際に再度編集することができます。

オンライン図生成ツール、図をコードとして扱うプラットフォーム、技術ドキュメント作成ツール、または統合された視覚モデリング機能を備えたナレッジ管理ツールをお探しの場合、この新しいワークフローは図とドキュメントを統合するための便利な方法を提供します。

Visual Paradigm OpenDocs を起動そして、VPasCode で駆動される編集可能な図を用いて、より豊かで有用なドキュメントの作成を開始してください。

よくある質問

新しい OpenDocs の機能強化とは何ですか?

OpenDocs は、Visual Paradigm VPasCode との統合を通じて、ユーザーが編集可能な図を作成し、ドキュメントページに挿入することを可能にしました。

OpenDocs に図を挿入した後、編集することはできますか?

はい。挿入された図の鉛筆アイコンをクリックして、VPasCode エディターで再度開きます。図のコードを変更した後、「保存して閉じる」をクリックすると、OpenDocs ページ内の図が更新されます。

どのような図形式がサポートされていますか?

VPasCode は、PlantUML、Mermaid、Graphviz、D2、Markmap、ECharts、JSON、YAML、XML、CSV、TOML、DBML、SQL を含む形式と技術をサポートしています。サポートされている図の種類には、フローチャート、シーケンス図、クラス図、状態図、ER 図、C4 図、マインドマップ、アーキテクチャ図、ガントチャートなどがあります。

この機能を使用するために図のコードを知る必要がありますか?

いいえ。VPasCode エディターまたは例ギャラリーからサンプルを読み込むことができます。また、「AI で作成」機能を使用して、自然言語で必要な図を記述し、AI に初期の図スクリプトを生成させることもできます。

OpenDocs にアクセスするにはどこに行けばよいですか?

Visual Paradigm OpenDocs は、次の場所でアクセスできます。https://ai-toolbox.visual-paradigm.com/app/opendocs/.

VPasCode についてさらに詳しく学ぶにはどこに行けばよいですか?

次のページをご覧ください。VPasCode機能ページコードベースの図作成プラットフォーム、対応フォーマット、リアルタイムレンダリング、AI支援、および関連機能について詳しく学ぶ

上部へスクロール