如何将UML图集成到GitLab或GitHub中


73

我想发布一些公共可用存储库中的编程文档。本文档包含格式化文本,一些UML图和许多代码示例。我认为GitHub或GitLab是发布此内容的好地方。

要发布UML图,我想有一些简单的方法来将其更新到存储库中并在Wiki中以图像形式显示。我不想将这些图保存在我的计算机(或云中)中,对其进行编辑,生成图像,然后每次都将其发布。

有没有一种方法可以将图表放入存储库中(采用PlantUML语法是理想的),将它们链接到markdown文本中,并使图像在每次更新时自动更新?

Answers:


73

编辑:代理服务的替代

这种方式与下面的答案明显不同并且更简单。它使用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 markdown文件中的任何图像都会自动更新。但这需要一个棘手的步骤来创建指向间接的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)并创建使用该!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
    
  3. 图像URL从PlantUML.com的图像,例如,复制http://plantuml.com:80/plantuml/png/FSfB2e0m303Hg-W1RFPUHceiDf36aWzwVEl6tOEPcGGvZXBAKtNljW9eljD9NcCFAugNU15FU3LWadWMh2GPEcVnQBoSP0ujcnS5KnmaWH7-O_kEr8TU并粘贴到你的GitHub的降价文件。该网址不会更改。

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

奖励:您甚至可以通过plantuml/png/将URL的一部分修改plantuml/svg/如下来访问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在评论中指出的那样,私有存储库中的原始文件将带有URL token=<LONGSTRINGHERE>,并且该标记会随着源文件的更新而改变。不幸的是,降价会在这种情况下中断,因此将文件提交到GitHub必须更新自述文件,这不是一个很好的解决方案。


我不确定它是否完美,因为GitHub.md从其camo.githubusercontent.com网站中的文件缓存图像。我目前有一个已更新的用例图,但是.md几天后更新仍未到达文件,即使我更新了.md文件的其他部分也是如此。我可能不得不触摸涉及图像的部分。YMMV。
Fuhrmanator 2015年

6
确实,GitHub似乎仅camo在URL更改图像时才更新其缓存的站点图像。在不实际更改的情况下更新URL的一种方法是添加/删除.svg(或者.png如果您使用的是该格式)。PlantUML并不在乎您是否具有该扩展名,但是GitHub会认为您更改了URL并在中更新了其缓存camo.。有关详细信息,请参见github.com/fuhrmanator/course-activity-planner/commit/…
Fuhrmanator

5
为了避免缓存,只需在URL中添加一些参数,例如plantuml.com/plantuml/proxy?src=https://raw.github.com/plantuml/…并在每次修改uml文件(test2diagrams.txt)时对其进行递增
ilya1245

2
@Fuhrmanator,缓存问题始终是浏览器问题,而不是GitHub或PlantUML。使用cache=nourl参数时,PlantUML服务器将设置Cache-Control: no-cache标头,因此浏览器不会将图像放入缓存。在浏览器中按F5时,将向PlantUML服务器发出新的图像请求。如果您将github url作为src(没有具体注释)传递给master分支,那么PlantUML将请求文件的最新版本,并将返回更新的图像。
HAL

2
“代理服务替代”效果很好。使它与私有存储库一起使用的方法是将包括在内?token=<LONGSTRINGHERE>作为原始url的一部分。不幸的是,该标记随着对plantuml源的每次编辑而改变,因此您必须花点时间使markdown文档保持最新。但这是可行的。
davidbak

11

我发现可以使用http://uml.mvnsearch.org/上的plantuml-gist来执行此操作

只需将有效的puml文件放入存储库中,并在文档中包含指向该站点的链接。

例如,对于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作为链接。

这是StackOverflow中链接的样子:

UML图片http://uml.mvnsearch.org/github/linux-china/plantuml-gist/blob/master/src/main/uml/plantuml_gist.puml

不幸的是,它似乎不适用于GitLab。即使我已多次检查路径,也始终会得到“找不到PUML文件”。

编辑uml.mvnsearch.org上的服务器似乎关闭。


如果您在gollum Wiki标记中显示了一个示例,这甚至会更酷,但是足以弄清楚它了。
Fuhrmanator

似乎uml.mvnsearch.org使用的服务器没有使用最新的PlantUML语言。我发布了一个使用PlantUML.com的云服务器的答案。
Fuhrmanator 2015年

@joanq嵌入的图像链接可能已损坏
mjs

9

这是一个古老的问题,但是在寻找该问题的解决方案的早期就出现了。

更新

GitLab现在在其公开发行中同时支持美人鱼和PlantUML图。开箱即用地支持美人鱼。

```mermaid
sequenceDiagram
Alice -> Bob: Authentication Request
Bob --> Alice: Authentication Response
Alice -> Bob:Another authentication Response
Bob --> Alice: Another authentication Response
```

原始答案

其他答案讨论了GitHub,但值得注意的是,如果您内部部署,则GitLab对此具有本机集成。由于某些原因,他们从未在公开发行中激活该功能。有门票可激活该功能。

如果您使用内部托管解决方案,则管理文档中提供了说明。

基本上你

  1. 站起来自己的plantuml服务器
  2. 检查Enable PlantUmlGitLab服务器配置
  3. 在您的降价中写PlantUml
```plantuml
Alice -> Bob: Authentication Request
Bob --> Alice: Authentication Response
   
Alice -> Bob: Another authentication Request
Alice <-- Bob: Another authentication Response
```

2
gitlab.com现在支持plantuml,并且测试良好。请参考 gitlab-plantuml
Jesse

@Jesse我几乎认为与美人鱼的支持无关,但是plantUML仍然涵盖了更多的用例。无论哪种方式,都很好听。
Jefferey Cave
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.