Outils pour utilisateurs

Outils du site


draw.io

Draw.io

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.

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


Utilisation

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.

Installer sa propre instance

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


Intégrer à NextCloud

Installer l'application

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.

Créer et éditer des schémas

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.

Utiliser sa propre instance 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:


Intégrer à DokuWiki

Installation

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

AVERTISSEMENT: Ce plugin est encore en version alpha: Même s'il fonctionne très bien, il ne gère pas la sécurité (les ACL) ce qui signifie que n'importe qui peut modifier vos schémas. Toutefois, je vous propose un patch (simple) qui n'autorise la modification des schémas qu'à l'administrateur DokuWiki.
Note 13 janvier 2020: Une mise à jour du plugin est sortie, et je n'ai pas re-testé l'astuce ci-dessous avec la nouvelle version du plugin.

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.

Utilisation

Créer un schéma

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.

Modifier un schéma existant

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 ! =)


Importer un schéma Draw.io externe

FIXME à rédiger


Astuces

  • Vous pouvez glisser directement un png, jpg ou svg sur la fenêtre de Draw.io pour l'intégrer à votre schéma.
draw.io.txt · Dernière modification: 2020/01/13 21:06 par sebsauvage