Différences

Ci-dessous, les différences entre deux révisions de la page.

--- info:dot:homepage [2024/03/08 07:59] – [tools] radeff
+++ info:dot:homepage [2026/04/22 04:40] (Version actuelle) – radeff
@@ Ligne 1: / Ligne 1: @@
 ====== Dot / GraphViz: diagram editor ======
 {{tag>pm brainstorm organigramme}}
-{{info:dot:html2.png|}}
-Graphviz (diminutif de Graph Visualization Software) est un ensemble d'outils open source créés par les laboratoires de recherche d'AT&T qui manipulent des graphes définis à l'aide de scripts suivant le langage DOT. Cet ensemble fournit aussi des bibliothèques permettant l'intégration de ces outils dans diverses applications logicielles.
+{{:info:dot:snapshot_20260226_100046.webp?123 |}}
+Graphviz (diminutif de Graph Visualization Software) est un ensemble d'outils open source créés par les laboratoires de recherche d'AT&T qui manipulent des graphes définis à l'aide de scripts suivant le langage DOT.
+Cet ensemble fournit aussi des bibliothèques permettant l'intégration de ces outils dans diverses applications logicielles.
 Graphviz est un logiciel libre distribué suivant l'Eclipse Public License.
@@ Ligne 16: / Ligne 19: @@
   * https://doc.ubuntu-fr.org/graphviz
 ===== doc =====
+  * https://graphviz.org/gallery/
   * http://graphs.grevian.org/example
-  * http://www.tonyballantyne.com/graphs.html
   * http://cyberzoide.developpez.com/graphviz/
   * http://www.graphviz.org/content/images-nodes-label-below
-  * http://graphviz.it/#/gallery/
   * http://edutechwiki.unige.ch/en/Graphviz (graphviz@tecfa)
 {{ info:dot:doc_graphviz.zip |Doc pdf}}
-===== examples =====
+===== exemple 1 (simple) =====
-https://renenyffenegger.ch/notes/tools/Graphviz/examples/index
-{{info:dot:1.png|}}
 <code dot>
-graph {
+digraph {
 		a -- b;
 		b -- c;
@@ Ligne 42: / Ligne 40: @@
 </code>
-{{ info:dot:graphviz_ex.zip |}}
+{{info:dot:1.png|}}
+source: https://renenyffenegger.ch/notes/tools/Graphviz/examples/index
+===== exemple 2 (couleur) =====
+<code dot>
+digraph {
+        bgcolor=azure;
+        node [shape=box, color=lightblue2, style=filled];
+        edge [arrowsize=2, color=gold];
+        "zero" -> "dix" [color=purple];
+        "un" -> "dix";
+        "zero" -> "vingt";
+        "deux" -> "vingt";
+        "zero" [shape=circle, color=thistle1, fontcolor=purple];
+}
+</code>
+{{ :info:dot:snapshot_20260226_094601.webp }}
+source: https://cyberzoide.developpez.com/graphviz/
+===== exemple 3 avec intégration HTML, couleurs etc =====
+<code dot>
+digraph G {
+    // Paramètres globaux du graph
+    graph [bgcolor="#f5f5f5", fontname="Arial", fontsize=12];
+    node [shape=plaintext, fontname="Arial", fontsize=11, style=filled, fillcolor="#ffffff", color="#333333"];
+    edge [color="#666666", arrowsize=0.8, penwidth=1.5, fontname="Arial", fontsize=10];
+    // Nœud A avec HTML + style
+    A [label=<
+        <TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0" CELLPADDING="4">
+            <TR><TD BGCOLOR="#e6f3ff"><B>Utilisateur</B></TD></TR>
+            <TR><TD><FONT COLOR="#0055aa">John Doe</FONT></TD></TR>
+            <TR><TD><FONT COLOR="#888888">Genève, Suisse</FONT></TD></TR>
+            <TR><TD><FONT POINT-SIZE="9">📍 Localisation actuelle</FONT></TD></TR>
+        </TABLE>
+    >, fillcolor="#e6f3ff", color="#0055aa"];
+    // Nœud B avec HTML + style
+    B [label=<
+        <TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0" CELLPADDING="4">
+            <TR><TD BGCOLOR="#ffe6e6"><B>Service</B></TD></TR>
+            <TR><TD><FONT COLOR="#aa0000">Infomaniak Mail</FONT></TD></TR>
+            <TR><TD><FONT COLOR="#888888">📧 E-mail sécurisé</FONT></TD></TR>
+            <TR><TD><FONT POINT-SIZE="9">🔒 Hébergé en Suisse</FONT></TD></TR>
+        </TABLE>
+    >, fillcolor="#ffe6e6", color="#aa0000"];
+    // Nœud C avec HTML + style
+    C [label=<
+        <TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0" CELLPADDING="4">
+            <TR><TD BGCOLOR="#e6ffe6"><B>Stockage</B></TD></TR>
+            <TR><TD><FONT COLOR="#00aa00">kDrive</FONT></TD></TR>
+            <TR><TD><FONT COLOR="#888888">📁 Cloud local & écologique</FONT></TD></TR>
+            <TR><TD><FONT POINT-SIZE="9">♻️ Énergie renouvelable</FONT></TD></TR>
+        </TABLE>
+    >, fillcolor="#e6ffe6", color="#00aa00"];
+    // Connexions avec styles personnalisés
+    A -> B [label="utilise", color="#0055aa", fontcolor="#0055aa", style="solid"];
+    B -> C [label="stocke", color="#aa0000", fontcolor="#aa0000", style="dashed"];
+    A -> C [label="accède à", color="#00aa00", fontcolor="#00aa00", style="dotted", arrowhead="vee"];
+}
+</code>
+{{ :info:dot:snapshot_20260226_100046.webp |}}
 ====== plugins IDE ======
 ===== Visual Studio Code (Codium) =====
@@ Ligne 51: / Ligne 118: @@
 {{:info:dot:ksnip_20240212-063056.jpg?nolink|}}
-===== atom =====
-Un petit add-on bien pratique pour visualiser et exporter (svg et xml) vos fichiers .dot depuis votre éditeur favori, [[info:atom|atom editor]]
-https://github.com/sverweij/atom-graphviz-preview-plus
+===== tools =====
+<code bash>
+#! /usr/bin/bash
+# Script to create graphviz images from dot files
-<code>CTRL-SHIFT-V</code>
+echo "Create a graphviz images from dot files"
+echo "Choose format;\
+\
+    bmp : Windows Bitmap Format\
+    gif : GIF\
+    tif/tiff : TIFF (Tag Image File Format)\
+    jpg/jpeg/jpe : JPEG\
+    png : Portable Network Graphics format\
+    svg/svgz : Scalable Vector Graphics\
+    dia : Dia format\
+    fig : FIG\
+    hpgl : HP-GL/2\
+    ico : Icon Image File Format\
+    ps : PostScript\
+    ps2 : PostScript for PDF\
+    pdf : Portable Document Format (PDF)"
+read format
+echo "which dot file?"
+ls *.dot
+read file
+dot -T$format $file -o $file.$format
+</code>
-{{info:dot:atomdot.jpg|}}
-===== tools =====
 {{ :info:dot:dot_graph.sh.txt |bash script dotgraph to generate an image from a dot file}}
@@ Ligne 65: / Ligne 155: @@
 Autres logiciels similaires
-https://www.yworks.com/products/yed (OLU - unige)
+    * https://www.yworks.com/products/yed (OLU - unige)
+    * https://mermaid.js.org/