====== 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.
{{ :drawio:drawio-application.png?direct |}}
* 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
----
====== 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).
{{ :drawio:drawio-demarrage-langue.png?direct |}}
* 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.
{{ :drawio:drawio-ouverture.png?direct |}}
* **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.
{{ :drawio:drawio-app-nextcloud.png?direct |}}
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"
{{ :drawio:drawio-new-diagram.png?direct |}}
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:
{{ :drawio:drawio-nextcloud-parametres.png?direct |}}
----
====== Intégrer à DokuWiki ======
===== Installation =====
Il est nécessaire d'installer un petit plugin DokuWiki.
Plugin : https://www.dokuwiki.org/plugin:drawio
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:
{{ :drawio:drawio-dokuwiki-bouton.png?direct |}}
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.
{{ :drawio:drawio-placeholder.png?nolink |}}
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 !
{{ :drawio:dokuwiki-drawio.mp4?800 |}}
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.