Simple Diagrammer Integration

The Diagrammer, as a component inheriting from Visualizer , can be simply integrated. It can be used through a simple data provider or an svg lib. To understand more how to use the SVG lib and different data source you can refer to the dealing with data section. the following code shows how we can integrate the diagrammer on a simple application:
<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:diagrammer="fr.kapit.diagrammer.*" xmlns:visualizer="fr.kapit.visualizer.*">

	<fx:Script>
		<![CDATA[
			import fr.kapit.visualizer.actions.MultiSelectionAction;
			import fr.kapit.visualizer.actions.PanAction;
			import fr.kapit.visualizer.actions.data.SelectionActionData;

		]]>
	</fx:Script>

	<fx:Declarations>
		<fx:XML id="dp">
			<graphml>
				<node id='1' label='A'/> 
				<node id='2' label='B'/> 
				<node id='3' label='C'/> 
				<node id='4' label='D'/>
				<node id='5' label='E'/>
				<node id='6' label='E'/>
				<node id='7' label='E'/>
				<node id='8' label='E'/>
				<node id='9' label='E'/>
				<node id='10' label='E'/>
				<edge source='1' target='2'/> 
				<edge source='1' target='3'/>
				<edge source='2' target='4'/>
				<edge source='2' target='5'/>
				<edge source='2' target='6'/>
				<edge source='6' target='7'/>
				<edge source='7' target='8'/>
				<edge source='8' target='9'/>
				<edge source='8' target='10'/>
			</graphml>
		</fx:XML>
	</fx:Declarations>
	
		<diagrammer:Diagrammer
			id="diag"
			width="100%"
			height="100%"
			layout="balloon"
			nodeLabelFields="label"
			dataProvider="{dp}"
			/>
	
</mx:Application>