# Mermaid.js pour faire des graphiques en markdown

![tag](redmine)
![tag](git)
![category](developpement)

Une librairie sympa qui permet de faire via du code des graphiques de plusieurs types

- flow
- sequence
- gantt
- pie
- class
- state
- user
- git
 
 On trouve toutes les infos sur https://mermaid-js.github.io/mermaid/ et pour faire des tests sur https://mermaid-js.github.io/mermaid-live-editor/
 
 Le principale avantage est qu'il existe des plugins pour
 
 - redmine
 -  gitea

## plugin redmine
 
Au niveau de son Dockerfile il suffit de rajouter
 
```
WORKDIR /usr/src/redmine/plugins
RUN git clone https://github.com/taikii/redmine_mermaid_macro.git redmine_mermaid_macro
```

pour l'utilisation

```
{{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
   }
  }}
```

 ## plugin gitea
 
 Il est possible de customizer les pages de gitea, par exemple pour rajouter la possibilité d'utiliser mermaid.js il suffit de créer un fichier dans /data/gitea/templates/custom/footer.tmpl contenant

```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}}
```

et par la suite dans un fichier .md d'ajouter le code

```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
   }
```

plus d'info sur https://docs.gitea.io/en-us/customizing-gitea/