====== 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.