Skip to content
Snippets Groups Projects

Create a post announcing and explaining Kroki usage

Merged Huste, Tobias requested to merge kroki-post into master
All threads resolved!
---
title: "GitLab - Create Diagrams From Textual Descriptions"
title: "Easy Diagram creation in Gitlab"
title_image: clark-tibbs-oqStl2L5oxI-unsplash.jpg
data: 2021-05-26
authors:
@@ -8,7 +8,7 @@ layout: blogpost
categories:
- tutorials
excerpt: >
Recently, the Helmholtz-wide software development platform has been extended
Recently, the Helmholtz-wide software development platform (<a href="https://gitlab.hzdr.de">Gitlab</a>) has been extended
with the ability to create diagrams from textual descriptions.
This post will help you getting started with this new feature.
@@ -16,19 +16,35 @@ excerpt: >
{{ page.excerpt }}
## Quick-Start Example
Let us jump right in with an example by creating a UML sequence diagram.
Any of these examples can be used in a place on <https://gitlab.hzdr.de>
## What is it about and where can it be applied?
Gitlab is perfect for colloborative work on codes, scripts and other shared files.
Now you can also create virtually all sorts of diagrams and sketches directly in Gitlab,
both allowing to **quickly create plots**, as well as
collaboratively build and maintain **complex graphs**.
All graphs are built from simple scripts directly in Gitlab using a plugin named [Kroki](https://kroki.io/).
Such scripts can be used in any place on the [Helmholtz-wide Gitlab](https://gitlab.hzdr.de)
where Markdown is supported:
* Markdown documents inside repositories
* Comments
* Issues
* Merge requests
* Milestones
* Snippets (the snippet must be named with a `.md` extension)
* Wiki pages
* Markdown documents inside repositories
Therefore, put this content describing the diagram in any of the items
<a href="https://gitlab.hzdr.de/examples/kroki"
class="btn btn-outline-secondary"
title="Link to examples in Gitlab">
<i class="fas fa-lightbulb"></i> Click here for examples in Gitlab!</a>
## Quick-Start Example
Let us jump right in with an example by creating a sequence diagram, using the common Unified Modeling Language (UML).
Put this content describing the diagram in any of the items
listed above.
```plantuml
@@ -149,18 +165,10 @@ You will be presented an image as shown below.
![PlantUML JSON example](https://kroki.hzdr.de/plantuml/svg/eNp1kDurAjEQhfv9FSH1IvtQECvv1UrExlIsopnVXHYnkozgg_3vThJWC7lNIN85M-cwc0_K0Z-3mD0zIWRjnKeN6kDOhFzZM8o84FZ96LYzdE5YnQKppumjtQPvGYRNDDw5APp5Y_mrrvRAcGKtULM6EuOiiJvYfTR0D6YluzXggLkfpVh1s3gf8MWy0C6sjlpR1tVUstLHJrZpzBFC5C66Ux8WDlfTaoMnViZllQ_YWdsxKqt6HFGf_ztWf4_VaYbffUzXcOGTdoAUG-yzPpsD6nDjF8HSYBU=)
## What Else Can Be Done?
The new feature is not limited to using PlantUML.
The new integration gives you access to more than that.
It supports, among others, [Vega](https://github.com/vega/vega),
[C4 with PlantUML](https://github.com/RicardoNiepel/C4-PlantUML),
[GraphViz](https://www.graphviz.org/) or
[BlockDiag](https://github.com/blockdiag/blockdiag).
For a complete list please refer to the official
[list of supported diagram types and formats](https://kroki.io/#support).
### Gantt Diagram with PlantUML
### Gantt Diagram
PlantUML also supports Gantt diagrams:
<details>
<summary>Show code</summary>
<div markdown=1>
@@ -188,6 +196,17 @@ For a complete list please refer to the official
More in-depth information on the Gantt diagram syntax is available in the
official [PlantUML documentation](https://plantuml.com/de/gantt-diagram).
## What Else Can Be Done?
The new feature is not limited to using PlantUML.
The new integration gives you access to more than that.
It supports, among others, [Vega](https://github.com/vega/vega),
[C4 with PlantUML](https://github.com/RicardoNiepel/C4-PlantUML),
[GraphViz](https://www.graphviz.org/) or
[BlockDiag](https://github.com/blockdiag/blockdiag).
For a complete list please refer to the official
[list of supported diagram types and formats](https://kroki.io/#support).
### Vega
<details>
Loading