Diagram-as-Code: ビジュアル コンテンツの動的でインタラクティブなドキュメントの作成

この記事では、Diagram-as-Code ツールを使用して動的でインタラクティブなビジュアル ドキュメントを作成する方法を段階的に説明します。静的な画像の代わりに、プログラムで図を生成し、常に最新の状態に保たれ、保守が容易になります。

---

?コードとしての図

Diagram as Code は、従来のグラフィック ツールの代わりにコードを使用して図を作成できるアプローチです。図を手動で作成する代わりに、テキスト ファイルにコードを記述して、図の構造、コンポーネント、接続を定義できます。

このコードはグラフィカル イメージに変換されるため、ソフトウェア プロジェクトへの統合と文書化が容易になります。特に、アーキテクチャ図やフロー図をプログラムで作成および更新する場合に役立ちます。

---

ダイアグラムとは何ですか?

Diagrams は、Diagram as Code アプローチを実装する ?Python ライブラリ で、コードを通じてアーキテクチャ インフラストラクチャ ダイアグラムや他のタイプのダイアグラムを作成できるようにします。図を使用すると、わずか数行のコードでクラウド インフラストラクチャ コンポーネント (AWS、Azure、GCP など)、ネットワーク要素、ソフトウェア サービスなどを簡単に定義できます。

?コードとしての図の利点

• ? コードとしての図の表現: コードから直接図を作成および更新し、アジャイル プロジェクトでの保守性を確保します。
• ? 自動ドキュメント: コードからビジュアルを生成し、図を現在のアーキテクチャに合わせて維持します。
• ? 変更管理: 図の変更を経時的に追跡します。
• ? 明瞭性の向上: 明確な共有ビジュアルにより、複雑なシステムの理解を向上させます。
• ✏️ カスタマイズ可能: 柔軟でカスタマイズされたビジュアルでクラウド インフラストラクチャ、ワークフロー、またはデータ パイプラインを表現します。

---

チュートリアル

?ライブラリのインストール

このチュートリアルでは現在、バージョン '0.23.4' を使用しています。

!pip install diagrams=='0.23.4'

---

?図: ノード

このライブラリを使用すると、ノードを使用してさまざまなインフラストラクチャ コンポーネントやサービスを表すアーキテクチャ図をプログラムで作成できます。

---

ノードの種類

図内のノードは、さまざまなクラウド サービス プロバイダーのコンポーネントや他のアーキテクチャ要素を表します。利用可能なノードの主なカテゴリは次のとおりです:

• ☁️ クラウドプロバイダー: AWS (アマゾン ウェブ サービス)、Azure、GCP、IBM Cloud、Alibaba Cloud、Oracle Cloud、DigitalOcean など。
• ? オンプレミス: 企業の敷地内に物理的に配置されたインフラストラクチャを表します。
• ? Kubernetes (K8S): コンテナ化されたアプリケーションのデプロイ、スケーリング、管理を自動化するコンテナ オーケストレーション システム (制御とナビゲーションを象徴する船の舵で表されます)。
• ?️ OpenStack: パブリック クラウドとプライベート クラウドを作成および管理するためのオープンソース ソフトウェア プラットフォーム。
• ? 汎用: プロバイダー固有のノードで特にカバーされていないコンポーネントを表すことができる汎用ノード (クロス ツール、1 つのカテゴリ内の異なるツールを表す)。
• ☁️ SaaS (Software as a Service): Snowflake、チャット サービス (Slack、Teams、Telegram など)、セキュリティ (Okta など) など、インターネット経由でサービスとして提供されるアプリケーションを表します。 )、またはソーシャル ネットワーク (SaaS コンセプトの電話とクラウドに取り消し線を引いたもの)。
• ? カスタム: ユーザーは、特定のフォルダーに保存されている PNG アイコンを使用して図をカスタマイズできます。これは、デフォルト ノード (取り消し線の付いたカスタム ツール) でカバーされていないインフラストラクチャ コンポーネントを表すのに役立ちます。

---

?プログラミング言語

Diagrams ライブラリを使用すると、さまざまなノードを使用してさまざまなプログラミング言語を表すことができます。これらのノードは、アーキテクチャの一部が特定のプログラミング言語で開発されたスクリプトまたはコンポーネントを利用しているかどうかを図で示すのに役立ちます。

以下では、ライブラリで利用可能なすべての言語を紹介します。不足している言語がある場合は、対応するロゴを特定のフォルダーにアップロードすることでカスタム ノードを追加できます。

!pip install diagrams=='0.23.4'

---

☁️ AWS (アマゾン ウェブ サービス)

Amazon ノードを使用できます。Amazon ノードは、次のようないくつかのカテゴリに分類されています。

• 分析とビジネス: aws.analytics、aws.business
• コンピューティングとストレージ: aws.compute、aws.storage、aws.cost
• データベースと開発ツール: aws.database、aws.devtools
• 統合と管理: aws.integration、aws.management
• 機械学習とモバイル: aws.ml、aws.mobile
• ネットワーキングとセキュリティ: aws.network、aws.security
• その他: aws.blockchain、aws.enduser、aws.engagement、aws.game、aws.general、aws.iot、aws.media、aws.migration、aws.quantum、aws.robotics、aws。衛星

次に、これらのカテゴリの 1 つを表して、aws.database 内で使用可能なノードを視覚化します。

!pip install diagrams=='0.23.4'

---

☁️ 使用例

次に、データセットのインポートと AWS での機械学習モデルのトレーニングに対応する簡単なブループリントを作成しましょう。

# Create the diagram object
with diagrams.Diagram("Programming Languages", show=False, filename="languages"):
    # Get all the languages available in this library
    languages = [item for item in dir(diagrams.programming.language) if item[0] != '_']

    # Divide the representation in two lines
    mid_index = len(languages) // 2
    first_line = languages[:mid_index]
    second_line = languages[mid_index:]

    # Add nodes in the first row
    prev_node = None

    for language in first_line:
        current_node = eval(f"diagrams.programming.language.{language}(language)")
        if prev_node is not None:
            prev_node >> current_node
        prev_node = current_node

    # Add nodes in the second row
    prev_node = None

    for language in second_line:
        current_node = eval(f"diagrams.programming.language.{language}(language)")
        if prev_node is not None:
            prev_node >> current_node
        prev_node = current_node

Image("languages.png")

---

リポジトリ

以下はすべてのコードへのリンクです。役立つと思われる場合は、スター ⭐️ を付けてフォローして、新しい記事の通知を受け取ることができます。これは、テクノロジー コミュニティで成長し、より多くのコンテンツを作成するのに役立ちます。

r0マイメンデス / コードとしての図

「図としてドキュメント」方法論を使用してドキュメント プロジェクトを作成する方法に関するチュートリアル

---

?コードとしての図: ビジュアル コンテンツの動的でインタラクティブなドキュメントの作成

Diagram as Code は、従来のグラフィック ツールの代わりにコードを使用して図を作成できるアプローチです。図を手動で構築する代わりに、テキスト ファイルにコードを記述して、図の構造、コンポーネント、接続を定義できます。

このコードはグラフィカル イメージに変換されるため、ソフトウェア プロジェクトへの統合と文書化が容易になります。特に、アーキテクチャ図やフロー図をプログラムで作成および更新する場合に役立ちます。

図とは何ですか?

Diagrams は、Diagram as Code アプローチを実装する ?Python ライブラリ で、コードを通じてアーキテクチャ インフラストラクチャ ダイアグラムや他のタイプのダイアグラムを作成できるようにします。図を使用すると、わずか数行のコードでクラウド インフラストラクチャ コンポーネント (AWS、Azure、GCP など)、ネットワーク要素、ソフトウェア サービスなどを簡単に定義できます。

? Diagram-as-Code の利点

• ?…

GitHub で表示

このパイプラインを使用してドキュメント サイトを実装する方法を知りたい場合は、次のリンクで公開した記事を読むことができます

---

?参考文献

1. 図: https://diagrams.mingrammer.com/

以上がDiagram-as-Code: ビジュアル コンテンツの動的でインタラクティブなドキュメントの作成の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。