Vous cherchez une solution gratuite pour créer un diagramme de flux, un organigramme pour votre entreprise, une carte heuristique (mind-mapming) ou encore créer n’importe quel type de diagramme ? Alors l’application Diagrams.net à tous les atouts pour répondre pleinement à votre besoin.

Démonstration / présentation vidéo de Diagrams.net

Diagrams.net c’est quoi ?

Diagram.net est une application gratuite et open-source qui nous permet de réaliser comme son l’indique de nombreux types de diagrammes.

Nous pouvons en effet créer également des cartes interactives, des organigrammes, des cartes heuristiques / mind-mapping, des diagrammes relationnelles de processus, et bien plus encore…

Les avantages de Diagrams.net

Cette solution dispose de nombreux atouts. Le principal étant que c’est une solution gratuite et open-source. Voici également les trois autres points qu’ils faut retenir sur cette solution :

  • Créer des diagrammes de qualité : la solution nous donne toutes les fonctionnalités essentielles pour créer n’importe quel type de diagramme.
  • Partager simplement nos fichiers : Il est possible de partager nos fichiers simplement et à n’importe. Cela tout en gardant la maîtrise des droits d’accès de ceux-ci.
  • Choisir l’endroit où nous stockons nos données : avec diagrams.net nous pouvons stocker nos fichiers dans de nombreuses plateformes (Google Drive, OneDrive, Notion, DropBox) ou nous pouvons également utiliser la solution en local en téléchargeant et en installant le logiciel sur notre ordinateur (drawio-desktop). Cela en fonctionne de notre système d’exploitation (Windows, MacOS, Linux).

Comme vous pouvez le voir diagrams.net est une solution complète qui permet de répondre à de nombreux besoin. Après cette petite présentation, découvrons ci-dessous le fonctionnement de l’application.

Fonctionnement de l’application

Accès à l’application

Depuis le site web officiel

Pour accéder à l’application et créer votre premier diagramme, il vous suffit de accéder à la page du site (Diagrams.net) et de cliquer sur le bouton « Start ».

accès diagrams.net site officiel

Depuis d’autres plateformes (ex: Google Drive)

Il est également possible de créer des diagrammes avec d’autres outils comme Google Drive, OneDrive, Dropbox ou encore Notion.

Par exemple, pour créer un fichier Diagrams dans votre espace Google Drive, il faut commencer par installer l’application en procédant comme suit :

  1. Cliquez sur « Nouveau > Plus > Associer plus d’applications ».
installation-diagrams-gdrive-1
  1. Tapez ensuite le terme « diagrams.net » dans le moteur de recherche de la Google Workspace Marketplace puis cliquez sur l’application du même nom.
diagrams.net installation de l'application sur google drive
  1. Enfin, cliquez sur le bouton « Installer » et validez les différentes autorisations d’accès.
bouton installer applications diagrams.net

Après avoir installé l’ajouté l’application à votre Drive, il vous suffit de cliquer sur le bouton « Nouveau > Plus > diagrams.net » pour créer un nouveau diagramme et le stocker ou vous le souhaitez.

création d'un diagramme diagrams.net depuis Google Drive

Création d’un diagramme et galerie des modèles

Suite au étape précédente, vous devriez maintenant arriver sur la fenêtre de création d’un diagramme.

Comme vous pouvez le constater, nous avons accès dès le départ à une multitudes de modèles classés dans différentes rubriques (Essentiel, Entreprise, Graphiques, Ingénierie, Organigrammes, Réseau, …)

Vous pouvez alors partir d’un des modèles disponibles ou encore partir sur un document vierge en cliquant sur « Diagramme vierge » puis « Créer ».

création d'un diagramme et les modèles.

Présentation de l’interface

Avant de rentrer dans les détails des fonctionnalités de l’application, voici ci-dessous les différentes zone qui compose un fichier Diagrams :

  1. Zone d’édition : zone de création de notre diagramme, organigrammes, etc.. Notez qu’il est possible de créer plusieurs feuille dans un document.
  2. Zone des menus et la barre d’outils :
  3. Zone des éléments à insérer : dans le volet de gauche nous avons accès à tous les éléments/objets que nous pouvons insérer.
  4. Zone de configuration du document : enfin sur le volet de droite nous avons accès aux différentes options de configuration du document.
interface de diagrams.net

Comme vous pouvez le constater, l’interface n’est pas bien différentes dans sa composition des applications d’autres éditeur comme Google ou encore Microsoft.

INFORMATION : Si vous souhaitez avoir l’application en français, il vous suffit de cliquer sur le logo qui ressemble à une planète et choisir « français ».

diagrams en français

Cliquez ensuite sur le bouton de validation pour actualiser la page. Vous devriez maintenant avoir tous les menus et fonctionnalité en français. 😉

La barre des menus et d’outils

barre des menus et d'outils - diagrams / drawIO

La barre des menus

Depuis la barre des menus nous avons accès à la plupart des fonctionnalités de l’application.

Notez qu’il est parfois préférable de passer par un clic-droit, le menu de gauche (configuration) ou encore la barre d’outils pour accéder au fonctionnalité rapidement.

La barre d’outils

Dans la barre d’outils nous avons accès à des fonctionnalités auquels il est utiles d’avoir accès rapidement. Nous avons notamment accès de gauche à droite aux boutons de … :

  • Vue,
  • Zoom,
  • Agrandir / réduire,
  • Annuler / refaire,
  • Corbeille (supprimer un élément),
  • Placer au dessus,
  • Placer en dessous,
  • Modifier la couleur de remplissage,
  • Modifier la couleur du texte,
  • Ajouter un effet d’ombre,
  • Ajouter une connexion / repère,
  • Insérer (Rectangle, Ellipse, texte, liens, …)
  • Insérer un tableau.

Intégrer des éléments dans la feuille

Avec la solution il est très simple de récupérer et d’intégrer des éléments dans la feuille. Pour cela, il suffit de chercher le diagramme souhaité dans la zone 3 (éléments à insérer) et de faire un glisser-déposer de l’élément dans la zone d’édition (1).

glisser déposer élément dans un diagrams

Après avoir insérer un élément, nous pouvons l’éditer depuis le volet à droite. Il est ainsi possible comme dans l’exemple ci-dessous de modifier la couleur, le style de bordure, la taille, etc…

Trouver et récupérer des formes

Depuis la zone des éléments à intégrer, il est possible de trouver et d’intégrer de nombreuses formes dans notre document pour créer un diagramme en fonction de nos besoins.

Pour trouver une forme, vous pouvez faire une recherche directement depuis le moteur de recherche en tapant un mot-clé (ex: rectangle) ou encore rechercher directement une forme depuis l’un des volets thématiques (général, divers, avancé, …).

Si vous souhaitez intégrer votre propres images dans l’application, il vous suffit d’ouvrir le volet « Bloc-notes » de cliquer sur le bouton « Modifier » (Icône Crayon) et d’importer les fichiers correspondants.

trouver et récupérer une forme - diagrams

Paramétrage de la feuille

Pour modifier le paramétrage de la feuille, le plus simple est de passer par le volet de paramétrage/configuration à droite de l’écran (cliquez sur la zone d’édition pour afficher ce volet si vous le volet de paramétrage d’un élément).

Onglet « Diagramme »

Depuis l’onglet diagramme, il est possible de définir des paramètres comme la vue :

  • Grille : afficher une grille avec la possibilité de modifier la taille et la couleur ou de laisser la page blanche.
  • Aperçu de la page : intéressant si vous souhaitez imprimer la page).
  • Arrière-plan : définir un arrière plan (couleur ou image).
  • Ombre : ajoute un effet d’ombre sur les éléments.

Vous pouvez également activer ou désactiver les options suivantes :

  • Flèches de connexion,
  • Points de connexion,
  • Guides,
  • Enregistrement automatique.

Enfin, vous pouvez définir la taille du papier et choisir le format d’affichage (Portrait, Paysage).

Onglet « Style »

Depuis l’onglet style vous pouvez modifier le style du diagramme. Cela notamment en activant (ou non) des options comme Sketch (effet dessin), Arrondi, Courbé et en sélectionnant un l’un des différents style proposés dans la liste en dessous.

modifier le style d'un diagrams

Cas d’usage

Pour vous montrer un exemple de ce qu’il est possible de faire avec cette application, j’ai réalisé une carte interactive qui représente une partie de l’arborescence du site (Windtopik.fr).

carte interactive windtopik

Après avoir inséré et nommé les différents rectangle, j’ai appliqué un lien vers la page correspondantes aux différentes pages du site.

Suite à cela, j’ai publier la page (Fichier > Publier > Lien) pour la rendre accessible à tout le monde depuis une URL (compte Google nécessaire pour rendre la feuille public).

Voir un aperçu du document depuis ce lien >> Carte interactive Windtopik.

Pour conclure…

Cette solution de création de diagramme open-source est vraiment très puissante. Elle nous permet comme vous avez pu le constater de créer simplement des diagrammes de qualité cela en partant de zéro ou utilisant l’un des nombreux modèles de la galerie.

Enfin, si vous pouvez suivre l’actualité de l’outil directement depuis la page du blog officiel de diagrams.net.

Voilà, vous avez maintenant toutes les informations à disposition pour créer des diagrammes de qualité avec cette solution. 😉

Portez-vous bien et à bientôt!


Si vous avez trouvé une faute d’orthographe, merci de nous en informer en sélectionnant le texte en question et en appuyant sur « Ctrl + Entrée« .

Leave a Reply

Your email address will not be published.

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.