From db75552b8bbc0f8124973a0b979e20b2da36cf24 Mon Sep 17 00:00:00 2001
From: Lakshika Parihar <31981299+lakshikaparihar@users.noreply.github.com>
Date: Fri, 7 Jan 2022 21:08:38 +0530
Subject: [PATCH] Update how-to-guides.md

Signed-off-by: lakshikaparihar <pariharlakshika@gmail.com>
---
 docs/features/techdocs/how-to-guides.md | 85 +++++++++++++++++++++++++
 1 file changed, 85 insertions(+)

diff --git a/docs/features/techdocs/how-to-guides.md b/docs/features/techdocs/how-to-guides.md
index d9a8ffb93a..7a96135e2b 100644
--- a/docs/features/techdocs/how-to-guides.md
+++ b/docs/features/techdocs/how-to-guides.md
@@ -442,3 +442,88 @@ techdocs:
 
 This way, all iframes where the host of src attribute is in the
 `sanitizer.allowedIframeHosts` list will be displayed
+
+<br>
+
+## How to add mermaid support in TechDocs
+
+To add `Mermaid support in Techdocs`, you can use [kroki](kroki.io) that creates diagrams from Textual descriptions. It is a single rendering gateway for all popular diagrams-as-a-code tools. It supports an enormous number of diagram types.
+
+1. **Create and Publish docker image:** Create the `docker image` from the following dockerfile and publish it to `dockerHub`.
+
+```docker
+FROM python:3.8-alpine
+
+
+RUN apk update && apk --no-cache add gcc musl-dev openjdk11-jdk curl graphviz ttf-dejavu fontconfig
+
+RUN pip install --upgrade pip && pip install mkdocs-techdocs-core==0.2.1
+
+RUN pip install mkdocs-kroki-plugin
+
+ENTRYPOINT [ "mkdocs" ]
+```
+
+Create a repository in your `DockerHub` and run the below command in the same folder where your `dockerfile` is present
+
+> docker build . -t dockerHub_Username/repositoryName:tagName
+
+Once the docker image is ready, push it to `DockerHub`.
+<br>
+
+2. **Update app-config.yaml:** So that when your app generates the techdoc, it will pull your docker image from `DockerHub`.
+
+```python
+techdocs:
+  builder: 'local' # Alternatives - 'external'
+  generator:
+    runIn: 'docker' # Alternatives - 'local'
+    dockerImage: 'lakshika1064/backstage:techdocs'
+    pullImage: true
+  publisher:
+    type: 'local' # Alternatives - 'googleGcs' or 'awsS3'. Read documentation for using alternatives.
+
+```
+
+3. **Add kroki plugin in Mkdocs.yml:**
+
+```yml
+plugins:
+  - techdocs-core
+  - kroki
+```
+
+4. **Add mermaid code into techdoc:**
+
+```md
+```kroki-mermaid
+sequenceDiagram
+GitLab->>Kroki: Request rendering
+Kroki->>Mermaid: Request rendering
+Mermaid-->>Kroki: Image
+Kroki-->>GitLab: Image
+```
+
+Done! Now you have a support of the following diagrams along with mermaid:
+
+- PlantUML
+- BlockDiag
+- BPMN
+- ByteField
+- SeqDiag
+- ActDiag
+- NwDiag
+- PacketDiag
+- RackDiag
+- C4 with PlantUML
+- Ditaa
+- Erd
+- Excalidraw
+- GraphViz
+- Nomnoml
+- Pikchr
+- Svgbob
+- UMlet
+- Vega
+- Vega-Lite
+- WaveDrom