xmlview

Convert xml files into directed graphs.

Features

• Manually adjustable layout.
• Connection visibility can be toggled.
• Curent view is automatiicaly saved.
• Configurable XML syntax

Installation

npm install -g xmlview

Usage

1) Declare your xml syntax.

xmlview draws any xml that follows a defined syntax. The element names and attributes are however configurable.

The following xml is an example of expected syntax.

<ROOT>  
  <DIAGRAM DIAG_NAME="24 Hours">  
    <NODE NODE_NAME = "Day"/>         
    <NODE NODE_NAME = "Night"/>            
    <CONNECTORS>  
      <CONNECT SOURCE="Day"   SOURCE_OUT="sun" DEST="Night" DEST_IN="set"/>  
      <CONNECT SOURCE="Night" SOURCE_OUT="sun" DEST="Day"   DEST_IN="rise"/>
    </CONNECTORS>  
  </DIAGRAM>  
</ROOT>  

2) Create corresponding format parameter.

The uppercase names are in the above xml would be declared as follows:

var xmlformat = {  
  root:'ROOT',  
  diagram:{       
    el:'DIAGRAM',  
    attr:{  
      name:'DIAG_NAME',  
    },  
    item:{  
      el:'NODE',  
      attr:{  
        name:'NODE_NAME',  
      },  
    },  
    connections:{   
      el:'CONNECTORS',  
      connector:{  
        el:'CONNECT',  
        attr:{  
          src:'SOURCE',   
          dst:'DEST',  
          src_out:'SOURCE_OUT',         			
          dst_in:'DEST_IN'  	
        }  
      }  
    }
  },
  options:{	    	
        connector_label_src_out:1,			//show src_out as part of label
        connector_label_dst_in:1,			//show dst_in as part of label
        connector_label_separator:"=>"      //separator between src_out and dst_in
        
  }
};  

3) Load XML

xmlview

Visit localhost:8888 and you will see each NODE laid out in a grid with all labeled connections.

4) Optionally, manually arrange the diagram.

All nodes can be dragged around the page. Their connections will follow as they are moved. The visibility of all connections to/from a node can be toggled by double-clicking the node.

When the xml file is reloaded the previous layout is automatically loaded.

Version History

• 2.2.0 Kill process if input file changes. This allows forever to be used to automatically show changes.
• 2.1.5 Check for missing connections section.
• 2.0.2 Put paramters onto commandline.
• 0.2.2 Fixed crash when uploading xml.
• 0.2.0 Added many-to-many connections.
• 0.1.1 Added missing plumber.js file to package.
• 0.1.0
  • Save layout between loads, allowing structural modifications to be made to the xml without reseting the layout.
  • Allow user control of connection labels through configuration options.
  • Replaced connector.attr.name with connector.attr.src_out and connector.attr.dst_in.
• 0.0.14 Create uploads directory if not exists.
• 0.0.13 README change
• 0.0.11 Syntax change to the xmlformat to be self consistent.
• 0.0.10 Bug fix to reload of existing diagrams.