From 27c6b8fc07eab2dd579b94cd92136738ace61706 Mon Sep 17 00:00:00 2001
From: zeripath <art27@cantab.net>
Date: Mon, 20 Jan 2020 16:14:03 +0000
Subject: [PATCH] Add documentation to add Mermaid.js to Gitea (#9872)
* Add documentation to add mermaid to Gitea
* Update documentation
Co-authored-by: Antoine GIRARD <sapk@users.noreply.github.com>
---
.../doc/advanced/customizing-gitea.en-us.md | 41 ++++++++++++++++++-
1 file changed, 39 insertions(+), 2 deletions(-)
diff --git a/docs/content/doc/advanced/customizing-gitea.en-us.md b/docs/content/doc/advanced/customizing-gitea.en-us.md
index 80aa09f5f..25859851b 100644
--- a/docs/content/doc/advanced/customizing-gitea.en-us.md
+++ b/docs/content/doc/advanced/customizing-gitea.en-us.md
@@ -100,6 +100,45 @@ Apart from `extra_links.tmpl` and `extra_tabs.tmpl`, there are other useful temp
- `body_outer_post.tmpl`, before the bottom `<footer>` element.
- `footer.tmpl`, right before the end of the `<body>` tag, a good place for additional Javascript.
+#### Example: Mermaid.js
+
+If you would like to add [mermaid.js](https://mermaid-js.github.io/) support to Gitea's markdown you simply add:
+
+```html
+{{if .RequireHighlightJS}}
+<script src="https://unpkg.com/mermaid@8.4.5/dist/mermaid.min.js"></script>
+<!-- or wherever you have placed it -->
+<script>mermaid.init(".language-mermaid")</script>
+{{end}}
+```
+
+to `custom/footer.tmpl`. You then can add blocks
+like below to your markdown:
+
+ ```mermaid
+ stateDiagram
+ [*] --> Active
+
+ state Active {
+ [*] --> NumLockOff
+ NumLockOff --> NumLockOn : EvNumLockPressed
+ NumLockOn --> NumLockOff : EvNumLockPressed
+ --
+ [*] --> CapsLockOff
+ CapsLockOff --> CapsLockOn : EvCapsLockPressed
+ CapsLockOn --> CapsLockOff : EvCapsLockPressed
+ --
+ [*] --> ScrollLockOff
+ ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
+ ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
+ }
+ ```
+
+If you want to use Mermaid.js outside of markdown, e.g. in other templates or HTML files,
+you would need to remove `{{if .RequireHighlightJS}}` and `{{end}}`.
+
+Mermaid will detect and use tags with `class="language-mermaid"`.
+
## Customizing Gitea mails
The `custom/templates/mail` folder allows changing the body of every mail of Gitea.
@@ -112,8 +151,6 @@ full path structure matching source.
Any statement contained inside `{{` and `}}` are Gitea's template
syntax and shouldn't be touched without fully understanding these components.
-
-
## Adding Analytics to Gitea
Google Analytics, Matomo (previously Piwik), and other analytics services can be added to Gitea. To add the tracking code, refer to the `Other additions to the page` section of this document, and add the JavaScript to the `custom/templates/custom/header.tmpl` file.