Update how-to-guides.md

Signed-off-by: lakshikaparihar <pariharlakshika@gmail.com>

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