Gogs: Supports Textual UML Diagrams in the markdown editor instead of picture reference

[baikangwang]

The Textual UML Diagrams draws simple SVG UML chart diagram from textual representation of the diagram. take the flow chart for example,
In the markdown editor such as issue comments and wiki pages typed the below textual code,

st=>start: Start
e=>end: End
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes or No?
io=>inputoutput: catch something...

st->op1->cond
cond(yes)->io->e
cond(no)->sub1(right)->op1

then they would be rendered as a simple SVG flow chart diagram when the page showed up

It's cooool feature! I could post UML diagrams to project wiki without any image reference if gogs was able to support it. Currently I had to setup an external images website to provide image links for gogs wiki.

The feature can be introduced as plugins into gogs, see below reference for details,

sequence: Turns text into UML sequence diagrams
flowchart: Draws simple SVG flow chart diagrams from textual representation of the diagram
mermaid: A simple markdown-like script language for generating charts from text via javascript

I am using Typora as off-line markdown editor which already supports this feature, and now I was expecting to post its output completely to gogs wiki if gogs supported as well.

Thanks a lot for team! Thanks for your good job!

[terzinnorbert]

I had a quick solution for that. Add the following lines to templates/inject/head.tmpl:

<script src="https://unpkg.com/[email protected]/dist/mermaid.min.js"></script>
<script>
    $(document).ready(function() {
        mermaid.init({noteMargin: 10}, ".language-mermaid");
    });
</script>

and restart the service

[jianblog]

Gogs version 0.11.86.0130

after add above scripts into templates/inject/head.tmpl, and restart gogs web.

then edit an markdown file or issue:

st=>start: Start
op=>operation: Your Operation
cond=>condition: Yes or No?
e=>end

st->op->cond
cond(yes)->e
cond(no)->op

but nothing happens when preview or save. If these steps right?

[ghost]

Gogs version 0.11.86.0130

after add above scripts into templates/inject/head.tmpl, and restart gogs web.

then edit an markdown file or issue:

st=>start: Start
op=>operation: Your Operation
cond=>condition: Yes or No?
e=>end

st->op->cond
cond(yes)->e
cond(no)->op

but nothing happens when preview or save. If these steps right?

According to the solution @terzinnorbert posted, he imported the mermaid (a nice opensource textual UML tool) library into gogs.
So you need to follow mermaid syntax like:

graph TD:
    A-->B;
    B-->C;
    C-->D;

For more information, please visit https://mermaid-js.github.io/mermaid/#/README.

It works perfectly for me.