GraphViewer

wc-graph-viewer

Visualiseur de graphes utilisant le format DOT pour représenter des structures de données complexes. Particulièrement utile pour les exercices d'algorithmique, de théorie des graphes, de structures de données, ou tout contexte nécessitant la visualisation de relations entre objets comme des arbres généalogiques ou des réseaux.

Documentation

Le composant GraphViewer permet de visualiser des graphes et diagrammes à partir d'une description textuelle utilisant la syntaxe DOT de Graphviz. Cette approche facilite la représentation visuelle de structures relationnelles complexes sans avoir à manipuler directement des éléments graphiques.

Propriété principale

• graph: Description du graphe au format DOT (langage de description de Graphviz)

Syntaxe de base

Le format DOT permet de définir facilement différents types de graphes:

Graphe non orienté

graph G {
    A -- B;
    B -- C;
    C -- D;
    D -- A;
}

Graphe orienté (digraph)

digraph G {
    A -> B;
    B -> C;
    C -> D;
    D -> A;
}

Personnalisation visuelle

Vous pouvez personnaliser l'apparence des nœuds et des arêtes:

digraph G {
    // Styles globaux
    node [shape=box, style=filled, color=lightblue];
    edge [color=gray];

    // Nœuds spécifiques
    racine [shape=ellipse, color=gold, label="Racine"];

    // Relations
    racine -> A [label="lien", style=dashed];
    A -> B [color=red];
    A -> C [color=blue];
}

Structures avancées

Sous-graphes

digraph G {
    subgraph cluster_0 {
        label = "Groupe 1";
        A; B; C;
    }

    subgraph cluster_1 {
        label = "Groupe 2";
        D; E;
    }

    A -> D;
    B -> E;
}

Arbre binaire

digraph arbre {
    racine -> gauche;
    racine -> droite;
    gauche -> gauche_gauche;
    gauche -> gauche_droite;
    droite -> droite_gauche;
    droite -> droite_droite;
}

Applications pédagogiques

Le composant GraphViewer est idéal pour:

• Illustrer des structures de données (arbres, graphes, réseaux)
• Représenter des algorithmes de parcours
• Visualiser des relations conceptuelles
• Montrer des organigrammes ou workflows
• Présenter des automates à états finis
• Illustrer des hiérarchies ou des dépendances

Ressources pour approfondir

• Guide complet de la syntaxe DOT (opens in a new tab)
• Tutoriel Graphviz en français (opens in a new tab)
• Galerie d'exemples Graphviz (opens in a new tab)

La puissance du langage DOT permet de créer rapidement des visualisations complexes à partir d'une description textuelle simple, facilitant ainsi l'intégration de schémas dynamiques dans vos ressources pédagogiques.

Exemple interactif

API