git 如何将 UML 图集成到 GitLab 或 GitHub 中
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/32203610/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to integrate UML diagrams into GitLab or GitHub
提问by joanq
I want to publish some programming documentation I have in a public available repository. This documentation has formatted text, some UML diagrams, and a lot of code examples. I think that GitHub or GitLab are good places to publish this.
我想在公共可用存储库中发布一些编程文档。该文档包含格式化文本、一些 UML 图和大量代码示例。我认为 GitHub 或 GitLab 是发布此内容的好地方。
To publish the UML diagrams, I would like to have some easy way to keep them updated into the repository and visible as images in the wiki. I don't want to keep the diagrams in my computer (or on the cloud), edit them, generate an image, and then publish it every time.
为了发布 UML 图,我想有一些简单的方法来保持它们更新到存储库中并在 wiki 中作为图像可见。我不想将图表保存在我的计算机(或云端)中,编辑它们,生成图像,然后每次都发布它。
Is there a way to put the diagrams in the repository (in PlantUML syntax would be ideal), link them in the markdown text, and make the images auto-update every time the diagram is updated?
有没有办法将图表放在存储库中(在 PlantUML 语法中是理想的),将它们链接到 Markdown 文本中,并在每次更新图表时自动更新图像?
采纳答案by Fuhrmanator
Edit: Alternative with Proxy service
编辑:替代代理服务
This way is significantly different and simpler than the answer below; it uses the PlantUML proxy service:
这种方式与下面的答案明显不同且更简单;它使用PlantUML 代理服务:
http://www.plantuml.com/plantuml/proxy?cache=no&src=https://raw.github.com/plantuml/plantuml-server/master/src/main/webapp/resource/test2diagrams.txt
The GitHub markdown for this would be:
GitHub 对此的降价将是:

This method suffers from not being able to specify the SVG format (it defaults to PNG), and it is perhaps not possible to work-around the caching bug mentioned in the comments.
此方法的缺点是无法指定 SVG 格式(默认为 PNG), 和 可能无法解决评论中提到的缓存错误.
After trying the other answer, I discovered the service to be slow and seemingly not up to the latest version of PlantUML.
在尝试了其他答案后,我发现该服务很慢,而且似乎没有达到 PlantUML 的最新版本。
I've found a different way that's not quite as straightforward, but it works via PlantUML.com's server (in the cloud). As such, it should work anywhere you can hotlink to an image.
我发现了一种不太简单的不同方式,但它通过 PlantUML.com 的服务器(在云中)工作。因此,它应该可以在任何可以热链接到图像的地方工作。
It exploits the !includeurl
functionand is essentially an indirection. The markdown file links to a PlantUML source that includes the diagram's source. This method allows modifying the source in GitHub, and any images in the GitHub markdown files will automatically update. But it requires a tricky step to create the URL to the indirection.
它利用了这个!includeurl
函数,本质上是一个间接的。Markdown 文件链接到包含图表源的 PlantUML 源。此方法允许修改 GitHub 中的源,并且 GitHub Markdown 文件中的任何图像都会自动更新。但是它需要一个棘手的步骤来创建指向间接的 URL。
- Get the URL to the raw PlantUML source, e.g.,
https://raw.githubusercontent.com/linux-china/plantuml-gist/master/src/main/uml/plantuml_gist.puml
(using the example in the joanq's answer) Go to http://plantuml.com/plantuml/form(or PlantText.com) and create a one-line PlantUML source that uses the
!includeurl URL-TO-RAW-PLANTUML-SOURCE-ON-GITHUB
operation. Continuing with the example URL, the PlantUML (meta)source is:!includeurl https://raw.githubusercontent.com/linux-china/plantuml-gist/master/src/main/uml/plantuml_gist.puml
Copy the image URL from PlantUML.com's image, e.g., http://plantuml.com:80/plantuml/png/FSfB2e0m303Hg-W1RFPUHceiDf36aWzwVEl6tOEPcGGvZXBAKtNljW9eljD9NcCFAugNU15FU3LWadWMh2GPEcVnQBoSP0ujcnS5KnmaWH7-O_kEr8TUand paste it into your GitHub markdown file. This URL won't change.

- 获取原始 PlantUML 源的 URL,例如
https://raw.githubusercontent.com/linux-china/plantuml-gist/master/src/main/uml/plantuml_gist.puml
(使用 joanq 答案中的示例) 转到http://plantuml.com/plantuml/form(或 PlantText.com)并创建一个使用该
!includeurl URL-TO-RAW-PLANTUML-SOURCE-ON-GITHUB
操作的单行 PlantUML 源。继续示例 URL,PlantUML(元)源是:!includeurl https://raw.githubusercontent.com/linux-china/plantuml-gist/master/src/main/uml/plantuml_gist.puml
图像URL从PlantUML.com的图像,例如,复制http://plantuml.com:80/plantuml/png/FSfB2e0m303Hg-W1RFPUHceiDf36aWzwVEl6tOEPcGGvZXBAKtNljW9eljD9NcCFAugNU15FU3LWadWMh2GPEcVnQBoSP0ujcnS5KnmaWH7-O_kEr8TU并粘贴到你的GitHub的降价文件。这个网址不会改变。

Bonus: You can even get access to the SVG format by modifying the plantuml/png/
part of the URL to be plantuml/svg/
as follows
奖励:您甚至可以通过plantuml/png/
将 URL 部分修改plantuml/svg/
为以下内容来访问 SVG 格式

Example on GitHub
GitHub 上的示例
https://github.com/fuhrmanator/course-activity-planner/blob/master/ooad/overview.md
https://github.com/fuhrmanator/course-activity-planner/blob/master/ooad/overview.md
回答by joanq
I found it is possible to do this using plantuml-gist on http://uml.mvnsearch.org/
我发现可以使用http://uml.mvnsearch.org/上的 plantuml-gist 来做到这一点
Just put a valid puml file in the repository and include a link to this site in the documentation.
只需在存储库中放置一个有效的 puml 文件,并在文档中包含指向该站点的链接。
For example, for the file https://github.com/linux-china/plantuml-gist/blob/master/src/main/uml/plantuml_gist.pumlin GitHub, you would use http://uml.mvnsearch.org/github/linux-china/plantuml-gist/blob/master/src/main/uml/plantuml_gist.pumlas your link.
例如,对于GitHub 中的文件https://github.com/linux-china/plantuml-gist/blob/master/src/main/uml/plantuml_gist.puml,您将使用http://uml.mvnsearch.org /github/linux-china/plantuml-gist/blob/master/src/main/uml/plantuml_gist.puml作为您的链接。
Here's what it looks like linked in StackOverflow:
这是在 StackOverflow 中链接的样子:
Unfortunately, it doesn't seem to work with GitLab. I always get a "No PUML file found", even though I have checked the path several times.
不幸的是,它似乎不适用于 GitLab。我总是收到“找不到 PUML 文件”的消息,即使我已经多次检查了路径。
EDIT: server at uml.mvnsearch.orgseems down.
编辑:uml.mvnsearch.org 上的服务器似乎已关闭。
回答by Jefferey Cave
This is an old question, but it comes up early in the searches for solutions to this problem.
这是一个古老的问题,但它在寻找此问题的解决方案的早期就出现了。
UPDATE
更新
GitLab now support both Mermaid and PlantUML diagrams on their public offering. Mermaid is supported out of the box.
GitLab 现在在其公开发行中同时支持 Mermaid 和 PlantUML 图。美人鱼开箱即用。
```mermaid
sequenceDiagram
Alice -> Bob: Authentication Request
Bob --> Alice: Authentication Response
Alice -> Bob:Another authentication Response
Bob --> Alice: Another authentication Response
```
Orig Answer
原答案
The other answers discuss GitHub, but it is worth noting that GitLab has native integration for this, if you are deploying in-house. For some reason, they have never activated the feature on their public offering. There are tickets opento activate the feature.
其他答案讨论了 GitHub,但值得注意的是,如果您在内部部署,GitLab 对此具有本机集成。出于某种原因,他们从未在公开募股中激活该功能。有门票打开以激活该功能。
If you are working of an in-house hosted solution, there are instructions available in the administration documentation
Basically you
基本上你
- stand up your own plantuml server
- check the
Enable PlantUml
in GitLab server configuration - write PlantUml in your markdown
- 建立你自己的 Plantuml 服务器
- 检查
Enable PlantUml
GitLab 服务器配置 - 在你的 Markdown 中写上 PlantUml
```plantuml
Alice -> Bob: Authentication Request
Bob --> Alice: Authentication Response
Alice -> Bob: Another authentication Request
Alice <-- Bob: Another authentication Response
```