1. ホーム
  2. git

[解決済み] UMLダイアグラムをGitLabやGitHubに統合する方法

2023-06-07 12:22:59

質問

私が持っているプログラミングのドキュメントを公開可能なリポジトリで公開したいと思っています。この文書には、フォーマットされたテキスト、いくつかのUML図、および多くのコード例があります。私はGitHubまたはGitLabがこれを公開するのに適した場所だと思います。

UML図を公開するために、私はそれらをリポジトリに更新し、Wikiで画像として見えるようにする何か簡単な方法を持ちたいと考えています。私は自分のコンピュータ(またはクラウド)に図を保持し、それらを編集し、画像を生成し、そしてそれを毎回公開したくないのです。

リポジトリに図を置き(PlantUML構文が理想的です)、マークダウン・テキストでそれらをリンクし、図が更新されるたびに画像を自動更新させる方法はありますか?

どのように解決するのですか?

編集:プロキシサーバを使用した代替案

この方法は、以下の回答とは大幅に異なり、よりシンプルです。 PlantUML プロキシサービス :

http://www.plantuml.com/plantuml/proxy?cache=no&src=https://raw.github.com/plantuml/plantuml-server/master/src/main/webapp/resource/test2diagrams.txt

これに対するGitHubのマークダウンはこうなります。

![alternative text](http://www.plantuml.com/plantuml/proxy?cache=no&src=https://raw.github.com/plantuml/plantuml-server/master/src/main/webapp/resource/test2diagrams.txt)

この方法は、SVG形式を指定できないのが難点です(デフォルトはPNGです)。 また のコメントで言及されているキャッシュのバグを回避することができない可能性があります。 .


試した結果 もうひとつの答え を試した後、サービスが遅く、PlantUMLの最新バージョンに対応していないようであることがわかりました。

私は、それほど単純ではない別の方法を見つけましたが、それは PlantUML.com のサーバー(クラウド上)を介して動作します。そのため、次のように動作するはずです。 画像へのホットリンクが可能な場所ならどこでも .

それは !includeurl 機能 であり、本質的にインダイレクトです。マークダウンファイルは、ダイアグラムのソースを含むPlantUMLソースにリンクしています。この方法では、GitHubでソースを修正することができ、GitHubのマークダウンファイルの中の画像は自動的に更新されます。しかし、インダイレクトへのURLを作成するためのトリッキーなステップを必要とします。

  1. 生の PlantUML ソースへの URL を取得します。 https://raw.githubusercontent.com/linux-china/plantuml-gist/master/src/main/uml/plantuml_gist.puml (joanqの答えの中の例を使って)

  2. に移動します。 http://plantuml.com/plantuml/form (または PlantText.com) にアクセスして、1 行の PlantUML ソースを作成します。 !includeurl URL-TO-RAW-PLANTUML-SOURCE-ON-GITHUB オペレーションを使用する 1 行の PlantUML ソースを作成します。例の URL を続けると、PlantUML (meta)source は次のようになります。

    !includeurl https://raw.githubusercontent.com/linux-china/plantuml-gist/master/src/main/uml/plantuml_gist.puml
    
    
  3. PlantUML.comの画像から画像URLをコピーする、例, http://plantuml.com:80/plantuml/png/FSfB2e0m303Hg-W1RFPUHceiDf36aWzwVEl6tOEPcGGvZXBAKtNljW9eljD9NcCFAugNU15FU3LWadWMh2GPEcVnQBoSP0ujcnS5KnmaWH7-O_kEr8TU をコピーし、GitHub のマークダウンファイルに貼り付けます。このURLは変更されません。

    ![PlantUML model](http://plantuml.com:80/plantuml/png/3SNB4K8n2030LhI0XBlTy0YQpF394D2nUztBtfUHrE0AkStCVHu0WP_-MZdhgiD1RicMdLpXMJCK3TC3o2iEDwHSxvNVjWNDE43nv3zt731SSLbJ7onzbyeF)
    
    

ボーナス : を修正することで、SVGフォーマットにアクセスすることもできます。 plantuml/png/ の部分を plantuml/svg/ を次のようにします。

![PlantUML model](http://plantuml.com:80/plantuml/svg/3SNB4K8n2030LhI0XBlTy0YQpF394D2nUztBtfUHrE0AkStCVHu0WP_-MZdhgiD1RicMdLpXMJCK3TC3o2iEDwHSxvNVjWNDE43nv3zt731SSLbJ7onzbyeF)

GitHubでの例

https://github.com/fuhrmanator/course-activity-planner/blob/master/ooad/overview.md

プライベートレポの注意点

として davidbak がコメントで指摘したように、プライベートリポジトリの raw ファイルは、URL に token=<LONGSTRINGHERE> が含まれており、ソースファイルが更新されるとこのトークンが変更されます。残念ながら、このようなことが起こるとマークダウンが壊れてしまうため、Readmeファイルを更新する必要があります。 の後に の後にReadmeファイルを更新しなければなりません。