diff --git a/custom/epoc-theme/nav.html b/custom/epoc-theme/nav.html
index 6715851691d74b7d4b76d3fdaac7f9b4bb577da1..f529357ff2799583d130e5cc2969aaec879af046 100644
--- a/custom/epoc-theme/nav.html
+++ b/custom/epoc-theme/nav.html
@@ -23,11 +23,7 @@
                         <div class="dropdown-menu" aria-labelledby="dropdown02">
                             {% for nav_item_child in nav_item.children %}
                                 {% if nav_item_child.children %}
-                                <a class="dropdown-item" href="{{ nav_item_child.children[0].url | url }}">
-                                    {{ nav_item_child.title }}
-                                </a>
-                                {% else %}
-                                    {% if "SEPARATOR" == nav_item_child.url %}
+                                    {% if nav_item_child.children[0].url == 'guide/outils/' %}
                                     <div class="dropdown-item">
                                         <div class=" relative flex items-center">
                                             <div class="flex-grow border-t border-gray-200"></div>
@@ -36,10 +32,14 @@
                                         </div>
                                     </div>
                                     {% else %}
+                                        <a class="dropdown-item" href="{{ nav_item_child.children[0].url | url }}">
+                                            {{ nav_item_child.title }}
+                                        </a>
+                                    {% endif %}
+                                {% else %}
                                     <a class="dropdown-item" href="{{ nav_item_child.url | url }}">
                                         {{ nav_item_child.title }}
                                     </a>
-                                    {% endif %}
                                 {% endif %}
                             {% endfor %}
                         </div>
diff --git a/docs/guide/.pages b/docs/guide/.pages
index 3ec9d3e821dca037c065fb559a743dd6c8c71493..1e11f34667a805d2dcda1035e680b57f8ba61c8c 100644
--- a/docs/guide/.pages
+++ b/docs/guide/.pages
@@ -1,5 +1,6 @@
 nav:
     - Guide Editeur : user
-    # - Développeur : developer
-    # - Outils: SEPARATOR
-    - Générateur QR Code : ../../qr-code-generator
\ No newline at end of file
+    - Guide Développeur : developer
+    - Outils: outils
+    - Générateur QR Code : ../../qr-code-generator
+    - Diagramme Mermaid : ../../mermaid-editor
\ No newline at end of file
diff --git a/docs/guide/developer/.pages b/docs/guide/developer/.pages
index 98c8d6ce1553fa66f93de1d13e428933107333ec..d174f9fcf76e598413b462715009bab27db45e24 100644
--- a/docs/guide/developer/.pages
+++ b/docs/guide/developer/.pages
@@ -1,6 +1,6 @@
 nav:
-    - Démarrage : getting-started.md
-    - Spécifications ePoc: specs
-    - Application mobile : mobile-app
-    - Editeur : editor
+    - contributing.md
+    - file-format.md
+    - data-types.md
+    - plugins.md
     - ...
\ No newline at end of file
diff --git a/docs/guide/developer/contributing.md b/docs/guide/developer/contributing.md
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..891517fd05841d355180690a0333fb78990311aa 100644
--- a/docs/guide/developer/contributing.md
+++ b/docs/guide/developer/contributing.md
@@ -0,0 +1,40 @@
+# Contribuer
+
+Bienvenue dans la communauté ePoc, une initiative open source dédiée à la création d'une solution d'apprentissage mobile libre et ouverte, ainsi qu'à l'élaboration d'un format d'édition adapté pour une éducation accessible et interactive sur les appareils mobiles. Nous sommes convaincus que l'éducation doit être accessible à tous, et notre projet vise à faciliter l'apprentissage via les téléphones portables, en particulier dans les régions où l'accès à l'éducation traditionnelle est limité.
+
+## Pourquoi contribuer ?
+
+1. **Faire la différence** : En contribuant à ePoc, vous participez à un projet qui vise à démocratiser l'accès à l'éducation et à promouvoir l'apprentissage mobile. Votre contribution aura un impact direct sur la vie des personnes qui bénéficieront de ces outils d'apprentissage innovants.
+
+2. **Développer vos compétences** : Travailler sur un projet open source comme ePoc vous permettra d'améliorer vos compétences techniques et de collaborer avec d'autres développeurs, concepteurs et éducateurs passionnés. C'est une excellente occasion d'apprendre et de grandir en tant que professionnel.
+
+3. **Faire partie d'une communauté** : En rejoignant ePoc, vous intégrez une communauté dynamique et engagée, qui partage les mêmes valeurs et objectifs. Vous aurez l'opportunité de rencontrer et d'échanger avec des personnes du monde entier, et de créer des liens durables.
+
+## Comment contribuer ?
+
+Il existe de nombreuses façons de contribuer à ePoc, en fonction de vos compétences et de vos centres d'intérêt. Voici quelques idées :
+
+1. **Développement de la solution d'apprentissage mobile** : Si vous êtes développeur, vous pouvez participer à l'amélioration de la solution ePoc en proposant de nouvelles fonctionnalités, en corrigeant des bugs ou en optimisant le code source.
+
+2. **Création de contenu** : Si vous êtes éducateur ou expert dans un domaine particulier, vous pouvez créer du contenu éducatif adapté au format ePoc et le partager avec la communauté.
+
+3. **Conception et design** : Si vous êtes designer, vous pouvez contribuer à l'amélioration de l'interface utilisateur de la solution ePoc et à la création de ressources visuelles pour les cours et les activités d'apprentissage.
+
+4. **Développement de plugins** : Si vous avez des compétences en développement, vous pouvez créer des plugins pour étendre les fonctionnalités de la solution ePoc et les partager avec la communauté.
+
+5. **Traduction** : Si vous maîtrisez plusieurs langues, vous pouvez aider à traduire la solution et le contenu éducatif dans différentes langues, afin de toucher un public plus large.
+
+6. **Promotion et communication** : Si vous êtes à l'aise avec les réseaux sociaux et la communication, vous pouvez aider à promouvoir le projet ePoc et à sensibiliser le public à l'importance de l'éducation mobile.
+
+## Rejoignez-nous dès aujourd'hui !
+
+N'hésitez plus et rejoignez la communauté ePoc pour contribuer à un projet open source qui a un réel impact sur l'éducation et l'apprentissage mobile dans le monde. Ensemble, nous pouvons faire la différence et offrir à chacun la possibilité d'apprendre et de progresser, quel que soit son lieu de vie ou ses moyens.
+
+Pour en savoir plus sur les différentes façons de contribuer à ePoc et pour rejoindre notre communauté, rendez-vous sur notre site web et consultez notre guide du contributeur. Nous avons hâte de vous accueillir parmi nous !
+
+## Liens utiles
+
+- [Sources](https://gitlab.inria.fr/learninglab/epoc/)
+- [Tchap](https://www.tchap.gouv.fr/#/room/#epoc:agent.education.tchap.gouv.fr)
+- [Discord](https://discord.gg/xzSVeuPEtH)
+- [Documentation des plugins](plugins.md)
\ No newline at end of file
diff --git a/docs/guide/developer/data-types.md b/docs/guide/developer/data-types.md
new file mode 100644
index 0000000000000000000000000000000000000000..97d1942e74d90b9438c00aefe9fdc0e8d4df7907
--- /dev/null
+++ b/docs/guide/developer/data-types.md
@@ -0,0 +1 @@
+# Format de données
\ No newline at end of file
diff --git a/docs/guide/developer/editor/content-packaging.md b/docs/guide/developer/editor/content-packaging.md
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/docs/guide/developer/file-format.md b/docs/guide/developer/file-format.md
new file mode 100644
index 0000000000000000000000000000000000000000..cf5432a56788048e736c656275078c45e1aff9b0
--- /dev/null
+++ b/docs/guide/developer/file-format.md
@@ -0,0 +1,67 @@
+# Format de fichier
+
+## Fichier `.epoc`
+
+Le format de fichier ePoc est une archive ZIP contenenant les assets, les données et 
+metadonnées mais aussi les données de conception de l'ePoc au format JSON. 
+
+Ce format de fichier a été introduit par l'éditeur.
+
+Pour extraire le contenu d'un fichier `.epoc`, il suffit d'utiliser la commande `unzip`.
+
+```bash
+unzip mon_ePoc.epoc
+```
+
+Pour archiver le contenu dans un `.epoc`, il suffit de se placer dans le dossier contenant
+`content.json` et `project.json` puis d'utiliser la commande `zip`
+
+```bash
+zip -r -X mon_ePoc.epoc *
+```
+## Contenus de l'archive
+
+### `content.json` (`.epoc`, `.epocx`et `.zip`)
+
+Contient les données (chapitres, pages, contenus, quizz) et métadonnées (titre, auteurs, etc)
+de l'ePoc au format JSON dans un schéma respectant les [specifications du format ePoc](data-types.md) définis
+en TypeScript.
+
+### `project.json` (`.epoc` seulement)
+
+Ce fichier contient les données de scénarisation, des contenus (cahpitres, pages, contenus, quizz) et
+métadonnées (titre, auteurs, etc) de l'ePoc au format JSON. Il s'agit d'une serialization des données
+du diagramme (voir [`vue-flow`](https://vueflow.dev/)).
+
+### `assets` *folder*
+
+Contient tous les assets (images, viéos, etc) de l'ePoc.
+
+### `plugins` *folder*
+
+### Autres
+
+D'autres fichiers ou dossiers présents dans l'archive peuvent être utilisé mais ne sont pas
+les utilisés ou lus par défaut.
+
+## Fichier de publication (export) `.epocx` ou `.zip`
+
+Le format de fichier d'export pour publication sur l'application mobile est aussi une 
+archive ZIP contenant les assets, les données et metadonnées de l'ePoc au format JSON.
+
+Il s'agit d'un sous-ensemble du fichier `.epoc`optimisé pour sa diffusion. Tous els assets
+et pages non reliés à un chapitre sont retirés de l'archive.
+
+Pour extraire le contenu d'un fichier `.epocx` ou `.zip`, il suffit d'utiliser la commande `unzip`.
+
+```bash
+unzip mon_ePoc.epocx # ou unzip mon_ePoc.zip
+```
+
+Pour archiver le contenu dans un `.epocx`, il suffit de se placer dans le dossier contenant
+`content.json` puis d'utiliser la commande `zip`
+
+```bash
+zip -r -X mon_ePoc.epocx *
+```
+
diff --git a/docs/guide/developer/mobile-app/plugins.md b/docs/guide/developer/plugins.md
similarity index 100%
rename from docs/guide/developer/mobile-app/plugins.md
rename to docs/guide/developer/plugins.md
diff --git a/docs/guide/developer/specs/content-packaging.md b/docs/guide/developer/specs/content-packaging.md
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/docs/guide/developer/specs/epoc-v1.md b/docs/guide/developer/specs/epoc-v1.md
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/docs/guide/developer/specs/epoc-v2.md b/docs/guide/developer/specs/epoc-v2.md
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/docs/guide/outils/index.md b/docs/guide/outils/index.md
new file mode 100644
index 0000000000000000000000000000000000000000..820f73809ad302801371679f45511dee64391043
--- /dev/null
+++ b/docs/guide/outils/index.md
@@ -0,0 +1,6 @@
+# Outils
+
+Ci-dessous une liste d'outils utiles à la conception :
+
+- [Générateur QR Code](../qr-code-generator)
+- [Diagramme Mermaid](../mermaid-editor)
\ No newline at end of file
diff --git a/docs/guide/user/content/.pages b/docs/guide/user/content/.pages
index d235ad4ed4b22fb2f5473a4cd37255cfcd7f1d8e..e7b41592d1ba86bbf7f19cf51a2c967b225e1c1a 100644
--- a/docs/guide/user/content/.pages
+++ b/docs/guide/user/content/.pages
@@ -1,4 +1,5 @@
 nav:
     - Texte : text.md
+    - Texte avancé : wysiwyg
     - Video : video.md
     - Audio : audio.md
\ No newline at end of file
diff --git a/docs/guide/user/wysiwyg/latex.md b/docs/guide/user/content/wysiwyg/latex.md
similarity index 66%
rename from docs/guide/user/wysiwyg/latex.md
rename to docs/guide/user/content/wysiwyg/latex.md
index 1d352aee27afd6a5d4e26822472f53ddfdcf73ce..3c52a4218ef41d6728151cff9b43702fed7dd923 100644
--- a/docs/guide/user/wysiwyg/latex.md
+++ b/docs/guide/user/content/wysiwyg/latex.md
@@ -1,9 +1,8 @@
 # Intégration LaTex
 Dans l'éditeur WYSIWYG, vous pouvez rédiger du code LaTex. Pour l'instant l'aperçu du LaTex n'est pas disponible dans l'éditeur, mais vous pouvez visualiser le résultat sur l'application mobile. Pour obtenir un aperçu de votre cours tout en rédigeant vos expressions LaTex, vous pouvez lancer l'aperçu en simultané avec l'éditeur.
-<div style="display: flex; height: 40rem">
-    <img src="../../images/katex-demo-editor.png" alt="Demo éditeur">
-    <img src="../../images/katex-demo-mobile.png" alt="Demo mobile">
-</div>
+
+![Démo Katex](../images/katex-demo.jpg)
+
 Vous pouvez également utiliser ce [bac à sable](https://katex.org/#demo)
 
 ## Délimiteur
@@ -14,17 +13,16 @@ Pour rédiger vos expressions, vous devez utiliser des délimiteurs au début et
 
 En résumé, le mode "display" rend les symboles plus grands, adaptés à une ligne distincte, tandis que le mode "inline" les rend plus petits, intégrés dans le texte. En mode "display", les équations sont centrées et n'ont pas de saut de ligne automatique, sauf si spécifié. En mode "inline", les sauts de ligne sont permis après certains symboles ou opérateurs.
 
-## Examples
-### "Display"
-<div style="display: flex; gap: 1rem;">
-    <pre>$$ \sum_{p = 0}^{2n + 1} (-1)^p $$</pre>
-    <img src="../../images/katex-display.png" alt="Katex display">
+## Exemples
+### Mode "Display"
+
+`$$ \sum_{p = 0}^{2n + 1} (-1)^p $$`
+
+![Katex en mode display](../images/katex-display.png)
+
 
-</div>
+### Mode "Inline"
 
+`$ \sum_{p = 0}^{2n + 1} (-1)^p $`
 
-### "Inline"
-<div style="display: flex; gap: 1rem;">
-    <pre>$ \sum_{p = 0}^{2n + 1} (-1)^p $</pre>
-    <img src="../../images/katex-inline.png" alt="Katex inline">
-</div>
\ No newline at end of file
+![Katex en mode inline](../images/katex-inline.png)
\ No newline at end of file
diff --git a/docs/guide/user/content/wysiwyg/mermaid.md b/docs/guide/user/content/wysiwyg/mermaid.md
new file mode 100644
index 0000000000000000000000000000000000000000..3fbb1f1837da2d86cbff688f5c80cf8f8e424454
--- /dev/null
+++ b/docs/guide/user/content/wysiwyg/mermaid.md
@@ -0,0 +1,4 @@
+# Intégration Mermaid
+Dans l'éditeur WYSIWYG, vous pouvez rédiger du code mermaid.
+
+[...]
\ No newline at end of file
diff --git a/docs/guide/user/export-and-publish.md b/docs/guide/user/export-and-publish.md
index 194b07d050db4afb2399e3dcd1a7a9978e9a0405..6da2f8b026464444bc1850b3512317468ee8d85c 100644
--- a/docs/guide/user/export-and-publish.md
+++ b/docs/guide/user/export-and-publish.md
@@ -17,7 +17,7 @@ Pour cela rien de plus simple :
 Afin de pouvoir consulter votre nouvel ePoc dans l'application mobile, vous devez l'héberger sur un service accessible
 depuis internet (Nuage, Nextcloud, Google Drive, Dropbox, Github, etc).
 
-Une fois celui-ci déposer vous pouvez générer un QR Code avec [notre outil](../../../qr-code-generator) en ligne pour l'importer depuis votre application mobile.
+Une fois celui-ci déposer vous pouvez générer un QR Code avec [notre outil](../../qr-code-generator/index.md) en ligne pour l'importer depuis votre application mobile.
 
 
 ### Déposer sur Nextcloud/Nuage
@@ -29,7 +29,7 @@ fournisseur basé sur Nextcloud [ici](https://www.chatons.org/search/by-service?
 2. Récuperer le lien de partage et ajouter `/download` à la fin  
     Exemple : `https://demo1.nextcloud.com/s/5Xs6DX9HWKKrNpW`  
     Devient : `https://demo1.nextcloud.com/s/5Xs6DX9HWKKrNpW/download`
-3. Utiliser [notre outil](../../../qr-code-generator) pour convertir ce lien en QR Code
+3. Utiliser [notre outil](../../qr-code-generator/index.md) pour convertir ce lien en QR Code
 
 ![Copy share link Nextcloud](images/share-nextcloud.png)
 ![Get QR Code Nextcloud](images/share-qr-nextcloud.png)
@@ -39,7 +39,7 @@ fournisseur basé sur Nextcloud [ici](https://www.chatons.org/search/by-service?
 
 1. Déposer votre ePoc dans votre espace
 2. Récuperer le lien de partage
-3. Utiliser [notre outil](../../../qr-code-generator) pour convertir ce lien en QR Code
+3. Utiliser [notre outil](../../qr-code-generator/index.md) pour convertir ce lien en QR Code
 
 ![Copy share link Google Drive](images/share-googledrive.png)
 ![Get QR Code Google Drive](images/share-qr-googledrive.png)
@@ -48,7 +48,7 @@ fournisseur basé sur Nextcloud [ici](https://www.chatons.org/search/by-service?
 
 1. Déposer votre ePoc dans votre dépôt (25MB max, le dépôt doit être *public*)
 2. Copier le lien vers le fichier
-3. Utiliser [notre outil](../../../qr-code-generator) pour convertir ce lien en QR Code
+3. Utiliser [notre outil](../../qr-code-generator/index.md) pour convertir ce lien en QR Code
 
 ![Copy share link Github](images/share-github.png)
 ![Get QR Code Github](images/share-qr-github.png)
@@ -57,7 +57,7 @@ fournisseur basé sur Nextcloud [ici](https://www.chatons.org/search/by-service?
 
 1. Déposer votre ePoc dans votre espace
 2. Récupérer le lien de partage
-3. Utiliser [notre outil](../../../qr-code-generator) pour convertir ce lien en QR Code
+3. Utiliser [notre outil](../../qr-code-generator/index.md) pour convertir ce lien en QR Code
 
 ![Copy share link Dropbox](images/share-dropbox.png)
 ![Get QR Code Dropbox](images/share-qr-dropbox.png)
diff --git a/docs/guide/user/images/katex-demo.jpg b/docs/guide/user/images/katex-demo.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..029fe95ac83c7a5d8372be1ccead19562a4840cd
Binary files /dev/null and b/docs/guide/user/images/katex-demo.jpg differ
diff --git a/docs/guide/user/index.md b/docs/guide/user/index.md
deleted file mode 100644
index d90974857be5042bfb3e506e6395ff0e439e2d23..0000000000000000000000000000000000000000
--- a/docs/guide/user/index.md
+++ /dev/null
@@ -1,5 +0,0 @@
-# Guide Utilisateur
-
-Epoc Editor est une application de bureau qui permet de créer des formations interactives, adaptées aux mobiles, sans avoir besoin de connaissances en programmation. Dans ce tutoriel, nous allons vous montrer comment utiliser cet outil pour créer une formation facilement.
-
-Public concerné : équipe pédagogique (ingénieurs pédagogiques, enseignants, responsables de formation)
\ No newline at end of file
diff --git a/docs/mermaid-editor/app/index.html b/docs/mermaid-editor/app/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..92b7fbb72a7cc96363eefc2ed616224febbb7c45
--- /dev/null
+++ b/docs/mermaid-editor/app/index.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Mermaid Editor</title>
+  </head>
+  <body>
+    <h2>Coming soon</h2>
+  </body>
+</html>
diff --git a/docs/mermaid-editor/index.md b/docs/mermaid-editor/index.md
new file mode 100644
index 0000000000000000000000000000000000000000..411b86d9e676d1286990ab1c202c37c36db001d2
--- /dev/null
+++ b/docs/mermaid-editor/index.md
@@ -0,0 +1,10 @@
+---
+template: epoc-theme/full-center.html
+hide:
+    - toc
+    - navigation
+---
+
+# Editeur de diagramme Mermaid
+
+<iframe style="width:100%;height:600px;border:none;margin-bottom:2em;" src="/mermaid-editor/app/index.html"></iframe>
\ No newline at end of file