Our configurable Graph view provides an option to add a legend for the graph. A legend provides end users with an explanation of the graph objects (nodes, edges, and ports), and makes reading the graph easier. 


The legend is configured by specifying a legend label and activating the legend option. The configuration of a legend requires the use of node, edge and port styles depending on what you would like to include in the legend.


This article provides two examples. The first one is a simple example in a small context, and the second example is a complete, real case example.


Prerequisites


Explanation of the Configuration Elements

  • <Legend/> indicates whether to show the legend option in the graph view or not.
  • <NodeStyle ... legendLabel="StringValue"/> the attribute legendlabel in the tag <NodeStyle> specifies the text to be added to the legend for this node style.
  • <EdgeStyle ... legendLabel="StringValue"/> the attribute legendlabel in the tag <EdgeStyle> specifies the text to be added to the legend for this edge style.
  • <PortStyle ... legendLabel="StringValue"> the attribute legendlabel in the tag <PortStyle> specifies the text to be added to the legend for this port style.
  • <Node .../> the attribute style in the tag <Node> refers to the name of a NodeStyle element.
  • <Edge .../>the attribute style in the tag <Node> refers to the name of a EdgeStyle element.
  • <Port../> the attribute style in the tag <Port> refers to the name of a PortStyle element.

Simple Case Example

Example Data

A graph that has only one node, which is connected to itself.


Example Configuration

<Graph>
	<Options>
		<Legend/>
	</Options>
	<NodeStyles>
		<NodeStyle name="nodeStyle1" fillColor="#8F3A84" fillColor2="#FFFFFF" borderThickness="1" borderColor="#111414" borderType="dash" visibleHeader="true" legendLabel="Node description"/>
	</NodeStyles>
	<EdgeStyles>
		<EdgeStyle name="edgeStyle1" color="#34AE52" thickness="1" lineType="dash" fromArrowType="none" toArrowType="none" legendLabel="Edge description"/>
	</EdgeStyles>
	<Node style="nodeStyle1"/>
	<Edge from="." to="." style="edgeStyle1"/>
</Graph



Example Result

Tip:  Select a legend label description text that is long enough to view, but not too long in length. 


Note: If no node and edge styles are specified, the legend will only show the Default styles for both node and edge. 

Complete Real Case (Safety case GSN) Example

Example Data

A graph to visualize a safety case using GSN notation. The example is only meant to show where the tags <Legend>, <NodeStyle>,<EdgeStyle>, <Node>, and <Edge> fit into a larger configuration. The other elements are of no importance in the context of this article.


Example Configuration 

 <Graph>
    <Options>
        <ObjIcons/> 
        <Legend/>
    </Options>
    <Layout name="incrementalHierarchical">
        <Setting name="layoutOrientation" value="topToBottom" />
    </Layout>
    <NodeStyles>
        <NodeStyle name="GSN" fillColor="#ffffff" fillColor2="#ffffff" borderThickness="1" borderColor="#000000" legendLabel="GSN safety case"/>  
        <NodeStyle name="Context" fillColor="#ffcccc" fillColor2="#ffffff" borderThickness="1" borderColor="#000000" legendLabel="Context">
            <Shape> 
                <Rectangle cornerRadius="30"/>
            </Shape>
        </NodeStyle>   
        <NodeStyle name="Goal" fillColor="#efffdf" fillColor2="#ffffff" borderThickness="1" borderColor="#000000" legendLabel="Goal">
            <Shape>
                <Rectangle/>
            </Shape>
        </NodeStyle>  
        <NodeStyle name="Strategy" shapeType="parallelogram" fillColor="#7acfff" fillColor2="#ffffff" borderThickness="1" borderColor="#000000" legendLabel="Strategy">
            <Shape>
                <Parallelogram/>
            </Shape>
        </NodeStyle> 
        <NodeStyle name="Justification" shapeType="ellipse" fillColor="#bdc3c7 " fillColor2="#ffffff" borderThickness="1" borderColor="#000000" legendLabel="Justification">
            <Shape> 
                <Ellipse/>
            </Shape>
        </NodeStyle> 
        <NodeStyle name="Assumption" shapeType="ellipse" fillColor="#f4d03f " fillColor2="#ffffff" borderThickness="1" borderColor="#000000" legendLabel="Assumption">
            <Shape> 
                <Ellipse/>
            </Shape>
        </NodeStyle> 
        <NodeStyle name="Solution" shapeType="circle" fillColor="#F5DEB3" fillColor2="#ffffff" borderThickness="1" borderColor="#000000" legendLabel="Solution">
            <Shape> 
                <Circle diameter="225"/>
            </Shape>
        </NodeStyle>        
        <NodeStyle name="Module" shapeType="circle" fillColor="#FFDFFF" fillColor2="#ffffff" borderThickness="1" borderColor="#000000" legendLabel="Module">
            <Shape> 
                <Circle diameter="200"/>
            </Shape>
        </NodeStyle>        
        <NodeStyle name="Contract" shapeType="ellipse" fillColor="#FFFFFF" fillColor2="#ffffff" borderThickness="1" borderColor="#000000" legendLabel="Contract">
            <Shape> 
                <Ellipse/>
            </Shape>
        </NodeStyle>                
    </NodeStyles>
    <EdgeStyles>
        <EdgeStyle name="SupportedBy" fillColor="#000000" thickness="2" lineType="solid" fromArrowType="none" toArrowType="default" legendLabel="SupportedBy"/>
        <EdgeStyle name="InContextOf" fillColor="#000000" thickness="2" lineType="solid" fromArrowType="none" toArrowType="triangle" legendLabel="InContextOf"/>   
    </EdgeStyles>
    <Node style="GSN">
        <ApplyTemplate name="addGraphObjects"/> 
    </Node>
    <Template name="addGraphObjects">

        <Context name="GSNContext">  
            <AddParts owner="main" sid="ISGO" part="GoalToSubgoal" defobj="Goal"/>
            <AddParts owner="main" sid="ISCON" part="GoalToContext" defobj="Context"/>
            <AddParts owner="main" sid="ISSOL" part="GoalToSolution" defobj="Solution"/>
            <AddParts owner="main" sid="ISJU" part="GoalToJustification" defobj="Justification"/>
            <AddParts owner="main" sid="I2SCAS" part="GoalToAssumption" defobj="Assumption"/>
            <AddParts owner="main" sid="MODUL" part="GoalToModule" defobj="Module"/>
            <AddParts owner="main" sid="CONTRCT" part="GoalToContract" defobj="Contract"/>
            <AddParts owner="Goal" sid="ISCON" part="GoalToContext" defobj="+Context"/>
            <AddParts owner="Goal" sid="ISSOL" part="GoalToSolution" defobj="+Solution"/>
            <AddParts owner="Solution" sid="I2SOLIT" part="SolutionToSolItem" defobj="SolItem"/>
            <AddParts owner="Goal" sid="I2SCAS" part="GoalToAssumption" defobj="+Assumption"/>
            <AddParts owner="Goal" sid="ISJU" part="GoalToJustification" defobj="+Justification"/>
            <AddParts owner="Goal" sid="MODUL" part="GoalToModule" defobj="+Module"/>
            <AddParts owner="Goal" sid="CONTRCT" part="GoalToContract" defobj="+Contract"/>

            <!-- Extensions -->
            <AddParts owner="Goal" sid="I2RQ" part="GoalToRequirement" defobj="Requirement"/>
        </Context>    


        <ForEachInContext name="GSNContext" group="Goal">
            <Choose>
                <When test="SID='26SCSTR'">
                    <Node style="Strategy" caption="S_#{? @IDGO + NewLine + Name}"/>                
                </When>
                <Otherwise>
                    <Node style="Goal" caption="G_#{? @IDGO + NewLine + Name}"/>
                </Otherwise>
            </Choose>
            <ContextGoForwardToPart part="GoalToSubgoal">
                <Edge from="Owner" to="DefObj" style="SupportedBy"/>
            </ContextGoForwardToPart>
            <ContextGoForwardToPart part="GoalToSolution">
                <Edge from="Owner" to="DefObj" style="SupportedBy"/>
            </ContextGoForwardToPart>
            <ContextGoForwardToPart part="GoalToJustification">
                <Edge from="Owner" to="DefObj" style="InContextOf"/>
            </ContextGoForwardToPart>
            <ContextGoForwardToPart part="GoalToStrategy">
                <Edge from="Owner" to="DefObj" style="SupportedBy"/>
            </ContextGoForwardToPart>
            <ContextGoForwardToPart part="GoalToAssumption">
                <Edge from="Owner" to="DefObj" style="InContextOf"/>
            </ContextGoForwardToPart>
            <ContextGoForwardToPart part="GoalToRequirement">
                <Edge from="Owner" to="DefObj" />
            </ContextGoForwardToPart>
            <ContextGoForwardToPart part="GoalToContext">
                <Edge from="Owner" to="DefObj" style="InContextOf"/>
            </ContextGoForwardToPart>
            <!-- Extensions -->
            <ContextGoForwardToPart part="GoalToRequirement">
                <Edge from="Owner" to="DefObj" />
            </ContextGoForwardToPart>
            <ContextGoForwardToPart part="GoalToModule">
                <Edge from="Owner" to="DefObj" />
            </ContextGoForwardToPart>
            <ContextGoForwardToPart part="GoalToContract">
                <Edge from="Owner" to="DefObj" />
            </ContextGoForwardToPart>
        </ForEachInContext>
        <ForEachInContext name="GSNContext" group="Solution">
            <Node style="Solution" caption="Sn_#{? @IDGO + NewLine + Name}" />
            <ContextGoForwardToPart part="SolutionToSolItem">
                <Edge from="Owner" to="DefObj" />
            </ContextGoForwardToPart>
        </ForEachInContext>

        <ForEachInContext name="GSNContext" group="Justification">
            <Node style="Justification" caption="J_#{? @IDGO + NewLine + Name}" />
        </ForEachInContext>

        <ForEachInContext name="GSNContext" group="Assumption">
            <Node style="Assumption" caption="A_#{? @IDGO + NewLine + Name}"/>
        </ForEachInContext>

        <ForEachInContext name="GSNContext" group="Context">
            <Node style="Context" caption="C_#{? @IDGO + NewLine + Name}" />
        </ForEachInContext>

        <ForEachInContext name="GSNContext" group="SolItem">
            <Node/>
        </ForEachInContext>

        <ForEachInContext name="GSNContext" group="Module"> 
            <Node caption="#{? 'Module Reference: ' + Name}">
                <ApplyTemplate name="addGraphObjects"/> 
            </Node>
        </ForEachInContext>
        <ForEachInContext name="GSNContext" group="Contract">
            <Node caption="#{? 'Contract Module Reference: ' + Name}">
                <ApplyTemplate name="addGraphObjects"/>
            </Node>    
        </ForEachInContext>

        <!-- Extensions -->
        <ForEachInContext name="GSNContext" group="Requirement">
            <Node style="Requirement" />
        </ForEachInContext> 
    </Template> 
</Graph>

Example Result