Draw.io est une application qui permet de faire des schémas et du dessin vectoriel. Elle a la particularité d'être une application web (qui tourne entièrement dans le navigateur). C'est une alternative libre à des logiciels comme Microsoft Visio. Elle peut être utilisée indépendamment, intégrée à une application web ou même en temps qu'application desktop.

Il est possible d'exporter dans différents formats ouverts (png, svg…).

Cette page va vous expliquer:

• Comment démarrer Draw.io, sauvegarder et charger vos documents.
• Comment installer votre propre instance (C'est facile !)
• Comment intégrer Draw.io à NextCloud et DokuWiki.

• Utilisation directe: https://draw.io
• Version desktop: https://get.draw.io/
• Sources: https://github.com/jgraph/drawio

Beaucoup de monde utilise https://draw.io, mais il est très facile d'installer sa propre instance. À part la partie connexion à GoogleDrive (et autres), c'est une application purement statique, c'est à dire qu'il s'agit juste de fichiers html/css/js/images. J'ai installé ma propre instance sur https://sebsauvage.net/draw

Ouvrez l'URL https://draw.io (ou l'URL de n'importe quelle autre instance).

Au lancement:

• Si vous voulez être en français, choisissez "Français" dans les langues, puis redémarrez l'application (rechargez la page ou pressez F5).

• Ensuite cliquez juste sur "Device"/"Périphérique", ce qui permet d'enregistrer les schémas sur votre propre ordinateur.
• Vous pouvez alors choisir de commencer un nouveau schéma ou ré-ouvrir un document existant.

• Pour sauvegarder votre travail, vous avez deux solution:
  • Le format draw.io (fichier en .drawio): menu Fichier > Enregistrer sous… > entrez un nom et cliquez ensuite sur "Télécharger".
  • Recommandé : Le format PNG. En effet vous exportez simplement un fichier png, et cette image contient aussi le schéma éditable au format drawio (Vous pouvez donc ré-ouvrir ce png dans Draw.io pour éditer le schéma !): menu Fichier > Exporter en tant que… > PNG

• Pour charger votre travail, menu Fichier > Ouvrir depuis > Périphérique et sélectionnez votre fichier. Vous pouvez ouvrir aussi bien le fichier en .drawio que le fichier .png.

Récupérez les sources sur GitHub: https://github.com/jgraph/drawio/archive/master.zip

Dans ce fichier, vous n'avez besoin de déployer que le répertoire /src/main/webapp/ sur votre serveur. Ensuite il vous suffit de l'utiliser !

Le miens est là : https://sebsauvage.net/draw

Cliquez sur votre utilisateur (tout en haut à droite) > Applications > Intégration et activez Draw.io.

Par défaut, cette extension utilise l'instance officielle https://draw.io.

Note: À aucun moment vos données ne transitent depuis ou vers le serveur Draw.io: Tout se fait exclusivement entre votre navigateur et votre instance NextCloud. Le site draw.io ne fait que servir l'application.

Dans votre gestionnaire de fichier NextCloud, faite "+" puis "New Diagram"

Notez que NextCloud tient absolument à le nommer avec une extension .xml.

Vous arrivez ensuite directement dans l'édition de votre schéma. Utiliser les boutons "Enregistrer" et "Quitter" tout en haut à droite quand vous avez terminé.

Vous pouvez bien entendu exporter votre schéma en png ou svg quand vous voulez.

Cette application a tout de même une limite: Seules les personnes ayant un compte sur l'instance NextCloud peuvent éditer le schéma. Vous ne pouvez pas partager un lien permettant à une personne extérieur d'éditer le schéma directement dans votre NextCloud. (Mais rien ne l'empêche de télécharger votre schéma pour aller l'éditer directement sur http://draw.io puis vous le renvoyer.)

Je vous conseille donc de le partager en png: Ainsi tout le monde peut voir le schéma, et ceux qui souhaitent l'éditer peuvent l'ouvrir dans Draw.io.

Par défaut, NextCloud utilise également l'instance https://draw.io, mais il est facile d'utiliser l'instance de votre choix.

Dans NextCloud, allez dans Paramètres > Paramètres supplémentaires et entrez l'URL de votre instance Draw.io. Exemple:

Il est nécessaire d'installer un petit plugin DokuWiki.

Plugin : https://www.dokuwiki.org/plugin:drawio

Une fois installé, pour ne permettre qu'à l'administrateur DokuWiki d'éditer les schémas, ajoutez la ligne suivante dans le fichier /lib/plugins/drawio/action.php comme suit:

--- lib/plugins/drawio/action.php.old1	2019-11-06 13:41:31.786165769 +0000
+++ lib/plugins/drawio/action.php	2019-11-13 07:49:51.964842606 +0000
@@ -29,6 +29,9 @@
          * handle ajax requests
          */
         function _ajax_call(Doku_Event $event, $param) {
+
+           if (!auth_isadmin()) { return; }
+
             if ($event->data !== 'plugin_drawio') {
                 return;
             }

Pour utiliser votre propre instance Draw.io, changez l'URL (var editor =…) au début du fichier /lib/plugins/drawio/script.js.

Lorsque vous éditez une page, cliquez sur le bouton:

ou utilisez la syntaxe:

{{drawio>monDiagramme}}

ou

{{drawio>maPage:monDiagramme}}

Et enregistrez votre page. Vous allez voir apparaître un placeholder (image vide): Cliquez dessus pour commencer à éditer le schéma.

Quand vous cliquez sur "Sauvegarder", cela va générer automatiquement un png qui sera intégré à votre page DokuWiki. Ce png contient le schéma Draw.io d'origine: Il est donc éditable.

Vous verrez également le fichier monDiagramme.png dans le gestionnaire de médias de DokuWiki.

Connecté en tant qu'administrateur, cliquez juste sur votre image pour l'éditer !

Oui pouvez désormais éditer un schéma directement dans votre wiki simplement en cliquant dessus !

à rédiger

• Vous pouvez glisser directement un png, jpg ou svg sur la fenêtre de Draw.io pour l'intégrer à votre schéma.