Tutorial

1. Execute the Hichart Editor.
   
   
   
   
2. Input cells (nodes) and edges.
   In order to make up nodes and edges, choose [View]-[Inner Structure] from the menu bar.
   
   First of all, add a cell to the editor. Click a node type button on the tool bar, and double-click on the editor. Here, click the "pre-defined" button which is fifth button from rightmost button, and double-click on the editor.
   After you double-click on the editor, a cell information window will open, choose "m_packet" from the list and click "OK" button.
   
   
   
   
   A cell with m_packet label are added.
   
   
   
   
   Repeat adding cell operation, construct diagram such as follow figure.
   
   
   
   
   Adding edges will follow the adding cells. Choose and click an edge type button, drag and drop between cells. Here, click the "edge parent-child" button which is the second button from rightmost button, and drag from a origin cell to a destination cell.
   
   
   
   Repeat adding edge operation, construct diagram such as follow figure.
   
   
   
   
   
3. After adding nodes and edges, choose [View]-[Hichart/DXL] from the menu bar.
   To draw a diagram aesthetically, execute parse from [Command]-[parse].
   
   
   
   
   If the parsing process is completed, aesthetic diagram is drawn after calculating layout attribute on a derivation tree obtained from parsing.
   
   
   
   
   Otherwise, a dialog window will open.
   
   
4. To save the diagram as a SVG file, choose [Command]-[Generate SVG File].
   
   
   
   
   
   
   
   
5. The generated SVG file can display on Internet Explorer with SVG plugin by Adobe (http://www.adobe.com/svg/viewer/install/)
   You can scroll a diagram in SVG by dragging mouse with [Alt] key.
   
   
   
   Next we explain another example using sample file.
   
   
6. Click the "Open" button on the tool bar, and open the sample file (DXL_sample.dat).
   This sample describes the sample code of JIS X 0130 DXL: Diagram exchange language for tree-structured charts using Hichart/DXL [1].
   
   
   
   
   
7. The diagram is drawn on the editor.
   
   
   
   
   The result after choosing [Command]-[parse] is as follows.
   
   
   
   
   The result after choosing [Command]-[Generate SVG File], and display the generated file on Internet Explorer is as follows.
   
   
   
   
   

Reference