Discussion :

[berry]

Salut à tous

Je dois représenter à l'aide d'un graphe (facile à comprendre pour un utilisateur presque lambda) qui décrive le schéma d'un document XML .

L'entrée devrait être de préférence un document XML mais si ce n'est pas le cas, ce n'est pas si grave.

En connaissez-vous des outils/librairies déjà existantes ?

ps: j'en ai trouvé une qui se rapproche de ce que je veux : http://cyberzoide.developpez.com/graphviz/ mais j'aimerai savoir s'il en existe d'autres.

[alain.couthures]

Et une belle feuille de style XSL-T pour générer un beau SVG ? Une piste, rien de plus...

[Morbo]

Je fais un peu cette recherche également en ce moment.
Il existe des formats xml de description de graphs comme GraphML, GXL et XGMML.
Pour le moment je n'ai trouvé que 2 api qui lisent du GraphML en entrée JUNG et prefuse.
JGrapht avait l'air bien mais j'ai pas vu de format d'import.
Néanmoins ils font leur rendering avec swing/awt/voir swt alors que je cherche plutôt à faire simplement des images.
J'ai pas trouvé de xslt faisant GraphML -> SVG non plus.

[berry]

C'est plutôt pour une appli web donc la génération d'images est nécessaire

awt/swing etc seront difficilement intégrables.

[alain.couthures]

Par contre, Inkscape permet, en mode ligne, de "compiler" un dessin SVG en image PNG !!!

[Morbo]

C'est plutôt pour une appli web donc la génération d'images est nécessaire

awt/swing etc seront difficilement intégrables.

Ben si tu trouves ça, préviens moi c'est aussi mon objectif.

Le fait qu'awt ou swing soit utilisé n'est pas forcément ingérable pour une webapp, il me semble que les lib Apache fop ou batik (http://xmlgraphics.apache.org/fop/0....ics.html#batik) utilise awt pour faire leur rendering et générer au final des images.

[alain.couthures]

J'aimerais bien voir un exemple concret de GraphML pour juger de la complexité d'en faire un rendu SVG basique... Vous avez ça sous la main ?

[Morbo]

Pour un simple graph avec 3 noeuds et 2 liens.
Il manque sans doute des info de caméra et de résolution pour faire un rendering.

GraphML:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<?xml version="1.0" encoding="UTF-8"?>
<!-- Created by yFiles 2.4.2.2 -->
<graphml xmlns="http://graphml.graphdrawing.org/xmlns/graphml" xmlns:y="http://www.yworks.com/xml/graphml" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://graphml.graphdrawing.org/xmlns/graphml http://www.yworks.com/xml/schema/graphml/1.0/ygraphml.xsd">
  <key id="d0" for="node" yfiles.type="nodegraphics"/>
  <key id="d1" for="edge" yfiles.type="edgegraphics"/>
  <graph id="G" edgedefault="directed">
    <node id="n0">
      <data key="d0" >
        <y:ShapeNode >
          <y:Geometry  x="159.0" y="215.0" width="30.0" height="30.0"/>
          <y:Fill color="#FFCC00"  transparent="false"/>
          <y:BorderStyle type="line" width="1.0" color="#000000" />
          <y:NodeLabel x="9.5" y="5.036865234375" width="11.0" height="19.92626953125" visible="true" alignment="center" fontFamily="Dialog" fontSize="13" fontStyle="plain" textColor="#000000" hasBackgroundColor="false" hasLineColor="false" modelName="internal" modelPosition="c" autoSizePolicy="content">1</y:NodeLabel>
          <y:Shape type="rectangle"/>
        </y:ShapeNode>
      </data>
    </node>
    <node id="n1">
      <data key="d0" >
        <y:ShapeNode >
          <y:Geometry  x="308.0" y="220.0" width="30.0" height="30.0"/>
          <y:Fill color="#FFCC00"  transparent="false"/>
          <y:BorderStyle type="line" width="1.0" color="#000000" />
          <y:NodeLabel x="9.5" y="5.036865234375" width="11.0" height="19.92626953125" visible="true" alignment="center" fontFamily="Dialog" fontSize="13" fontStyle="plain" textColor="#000000" hasBackgroundColor="false" hasLineColor="false" modelName="internal" modelPosition="c" autoSizePolicy="content">2</y:NodeLabel>
          <y:Shape type="rectangle"/>
        </y:ShapeNode>
      </data>
    </node>
    <node id="n2">
      <data key="d0" >
        <y:ShapeNode >
          <y:Geometry  x="238.0" y="324.0" width="30.0" height="30.0"/>
          <y:Fill color="#FFCC00"  transparent="false"/>
          <y:BorderStyle type="line" width="1.0" color="#000000" />
          <y:NodeLabel x="9.5" y="5.036865234375" width="11.0" height="19.92626953125" visible="true" alignment="center" fontFamily="Dialog" fontSize="13" fontStyle="plain" textColor="#000000" hasBackgroundColor="false" hasLineColor="false" modelName="internal" modelPosition="c" autoSizePolicy="content">3</y:NodeLabel>
          <y:Shape type="rectangle"/>
        </y:ShapeNode>
      </data>
    </node>
    <edge id="e0" source="n0" target="n1">
      <data key="d1" >
        <y:PolyLineEdge >
          <y:Path sx="0.0" sy="0.0" tx="0.0" ty="0.0"/>
          <y:LineStyle type="line" width="1.0" color="#000000" />
          <y:Arrows source="none" target="standard"/>
          <y:BendStyle smoothed="false"/>
        </y:PolyLineEdge>
      </data>
    </edge>
    <edge id="e1" source="n1" target="n2">
      <data key="d1" >
        <y:PolyLineEdge >
          <y:Path sx="0.0" sy="0.0" tx="0.0" ty="0.0"/>
          <y:LineStyle type="line" width="1.0" color="#000000" />
          <y:Arrows source="none" target="standard"/>
          <y:BendStyle smoothed="false"/>
        </y:PolyLineEdge>
      </data>
    </edge>
  </graph>
</graphml>

En XGML:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<section name="xgml">
	<attribute key="Creator" type="String">yFiles</attribute>
	<attribute key="Version" type="String">2.4.2.2</attribute>
	<section name="graph">
		<attribute key="hierarchic" type="int">1</attribute>
		<attribute key="label" type="String"></attribute>
		<attribute key="directed" type="int">1</attribute>
		<section name="node">
			<attribute key="id" type="int">0</attribute>
			<attribute key="label" type="String">1</attribute>
			<section name="graphics">
				<attribute key="x" type="double">174.0</attribute>
				<attribute key="y" type="double">230.0</attribute>
				<attribute key="w" type="double">30.0</attribute>
				<attribute key="h" type="double">30.0</attribute>
				<attribute key="type" type="String">rectangle</attribute>
				<attribute key="fill" type="String">#FFCC00</attribute>
				<attribute key="outline" type="String">#000000</attribute>
			</section>
			<section name="LabelGraphics">
				<attribute key="text" type="String">1</attribute>
				<attribute key="fontSize" type="int">13</attribute>
				<attribute key="fontName" type="String">Dialog</attribute>
				<attribute key="anchor" type="String">c</attribute>
			</section>
		</section>
		<section name="node">
			<attribute key="id" type="int">1</attribute>
			<attribute key="label" type="String">2</attribute>
			<section name="graphics">
				<attribute key="x" type="double">323.0</attribute>
				<attribute key="y" type="double">235.0</attribute>
				<attribute key="w" type="double">30.0</attribute>
				<attribute key="h" type="double">30.0</attribute>
				<attribute key="type" type="String">rectangle</attribute>
				<attribute key="fill" type="String">#FFCC00</attribute>
				<attribute key="outline" type="String">#000000</attribute>
			</section>
			<section name="LabelGraphics">
				<attribute key="text" type="String">2</attribute>
				<attribute key="fontSize" type="int">13</attribute>
				<attribute key="fontName" type="String">Dialog</attribute>
				<attribute key="anchor" type="String">c</attribute>
			</section>
		</section>
		<section name="node">
			<attribute key="id" type="int">2</attribute>
			<attribute key="label" type="String">3</attribute>
			<section name="graphics">
				<attribute key="x" type="double">253.0</attribute>
				<attribute key="y" type="double">339.0</attribute>
				<attribute key="w" type="double">30.0</attribute>
				<attribute key="h" type="double">30.0</attribute>
				<attribute key="type" type="String">rectangle</attribute>
				<attribute key="fill" type="String">#FFCC00</attribute>
				<attribute key="outline" type="String">#000000</attribute>
			</section>
			<section name="LabelGraphics">
				<attribute key="text" type="String">3</attribute>
				<attribute key="fontSize" type="int">13</attribute>
				<attribute key="fontName" type="String">Dialog</attribute>
				<attribute key="anchor" type="String">c</attribute>
			</section>
		</section>
		<section name="edge">
			<attribute key="source" type="int">0</attribute>
			<attribute key="target" type="int">1</attribute>
			<section name="graphics">
				<attribute key="fill" type="String">#000000</attribute>
				<attribute key="targetArrow" type="String">standard</attribute>
			</section>
		</section>
		<section name="edge">
			<attribute key="source" type="int">1</attribute>
			<attribute key="target" type="int">2</attribute>
			<section name="graphics">
				<attribute key="fill" type="String">#000000</attribute>
				<attribute key="targetArrow" type="String">standard</attribute>
			</section>
		</section>
	</section>
</section>

[alain.couthures]

Au premier coup d'oeil, c'est plus graphique que je ne l'imaginais...

Ca ressemble pas mal à du SVG, avec même des noms d'attributs ou d'éléments en commun, et une feuille de style XSLT doit pouvoir être envisagée !

[Morbo]

Heu lequel des 2 formats te semble le plus proche du SVG?

[alain.couthures]

GraphML me semble correspondre plus simplement que XGML au format SVG mais sans que ce soit très différent...

Le plus important, me semble t'il, c'est le système de coordonnées : la position des éléments (même celle des étiquettes!) et les attributs de style sont déjà donnés, je pense donc qu'il ne manque pas grand chose à part la position absolue des flèches qui doit pouvoir se calculer !