By default, the configurable graphs in SystemWeaver display in black and white with rectangular node shapes and no icons. However, there are options to customize the style and shape of nodes and the style of edges as well as to include item icons and define basic labeling. This article describes how to define these options.  


Prerequisites


Default Node and Edge Style


Color Definitions

The color values used with the attributes described in this article can be either a specific RGB value, where the Red, Green and Blue components are each expressed as two hexadecimal numbers:


color="#CE0F3E"


Or, any of the predefined color names: 


color="red"


The supported color names are listed below along with their corresponding RGB value:


NodeStyle

To define a node style, you will need to use the <NodeStyle> tag for each style. NodeStyle is used to define templates for how nodes should look in the graph. When a Node is created, it is possible to assign a NodeStyle to it by using the style attribute. The available NodeStyle attributes are: 

  • fillColor
  • fillColor2
  • borderThickness
  • borderColor
  • borderType
  • visibleHeader
  • legendLabel


Color and Border Styles

The below picture illustrates the attributes for the NodeStyle named "component" and their effects on the appearance of a node. The use of all attributes is not required. 


<Graph>
  <NodeStyles>
        <NodeStyle name="component" fillColor="Green" fillColor2="White" borderThickness="3" borderColor="Green" borderType="dash"/>
  </NodeStyles>
  <Node style="component"/> 
</Graph>  


Node Header Visibility

The visibleHeader attribute defines whether a node (including NodeGroups) with sub-nodes should display a header. Possible values are "true" (default) or "false". A node header has a gray background, and displays the name of the node.


Default

Without Header


Label Text in Legend

The legendLabel attribute defines the label text that will be added to the graph legend. This attribute is used together with Legend.



Shape

An optional Shape tag can be included in a NodeStyle to customize the shape. The available shapes are: 

  • Actor
  • AndGate
  • Boundary
  • Chevron
  • Circle
  • Control
  • Diamond
  • Ellipse
  • Entity
  • Note
  • OrGate
  • Package
  • Parallelogram
  • Rectangle
  • RectangularPentagon
  • Triangle



For more information on applying these shapes and the NodeStyle attributes described above, see NodeStyle in the SystemWeaver Script Language Reference Manual in the application Help.



EdgeStyle

To define an edge style, you will need to use the <EdgeStyle> tag for each style. An EdgeStyle is used to define templates for how edges should look. When an Edge is created, it is possible to assign a style to it by using the style attribute. The available EdgeStyle attributes are: 

  • color
  • thickness
  • lineType
  • fromArrowType
  • toArrowType

The below example illustrates the attributes and their effects on the appearance of an edge.

<Graph>

  <EdgeStyles>
    <EdgeStyle name="realization" color="Red" thickness="3" lineType="dashdotdot" fromArrowType="Circle" toArrowType="Triangle"/>
  </EdgeStyles>

  <Node/>                            
  <Variable name="vehicleSpecification" as="Item" select="."/>
  <ForEachPart type="XESX"> 
    <DefObj> 
      <Node/>
      <Edge style="realization" from="$vehicleSpecification" to="." />                       
    </DefObj>
  </ForEachPart>                                                                                             
</Graph>



Example Styles

<Graph> 

<NodeStyles>
<NodeStyle name="software" fillColor="#F5F5DD" fillColor2="#F5F5DD" borderThickness="3" borderColor="Gray" borderType="dash"/>
<NodeStyle name="component" fillColor="#FDD451" fillColor2="White" borderThickness="2"/>
<NodeStyle name="e2e" fillColor="#4a638d" fillColor2="White" borderThickness="1" borderType="dot"/>
</NodeStyles>

<EdgeStyles>
<EdgeStyle name="Arrows" toArrowType="triangle"/>
</EdgeStyles>

<Layout name="incrementalHierarchical">
<Setting name="layoutOrientation" value="bottomToTop"/>
</Layout>
<ForEachPart type="3EFL">
<Node style="e2e">
<DefObj>
<ForEachPart type="3PEN">
<DefObj>
<Node/>
</DefObj>
</ForEachPart>
</DefObj>
</Node>
</ForEachPart>
<ForEachPart type="XESX">
<Node style="software">
<DefObj>
<ForEachPart type="EXAC">
<DefObj>
<Node style="component">
<Variable name="component" as="Item" select="."/>
<ForEachPart type="3E2F">
<DefObj>
<Edge from="$component" to="." style="Arrows"/>
</DefObj>
</ForEachPart>
<ForEachPart type="ITOS">
<DefObj>
<OutPort connection="."/>
</DefObj>
</ForEachPart>
<ForEachPart type="ITIS">
<DefObj>
<InPort connection="."/>
</DefObj>
</ForEachPart>
</Node>
</DefObj>
</ForEachPart>
</DefObj>
</Node>
</ForEachPart>
</Graph>


ObjIcons

If you want to display the icon used in the SystemWeaver metadata in the graph nodes, you can use ObjIcons to do that in the Options tag directly below the Graph tag.