Render class nodes with compartments and UML relationship styles#100
Render class nodes with compartments and UML relationship styles#100jongalloway merged 3 commits intomainfrom
Conversation
Co-authored-by: jongalloway <68539+jongalloway@users.noreply.github.com>
There was a problem hiding this comment.
Pull request overview
This PR adds UML class diagram rendering capabilities to DiagramForge's SVG renderer, including compartmented class boxes and UML relationship arrow/marker variants. All changes are renderer and layout only — no parser dependency.
Changes:
- Adds
Edge.SourceArrowHeadproperty and three new SVG marker definitions (arrowhead-open,arrowhead-filled-diamond,arrowhead-open-diamond) for UML relationships. - Implements
SizeClassNodelayout sizing andAppendClassNoderendering for UML-style class boxes with annotations, bold class names, divider lines, and left-aligned compartments. - Adds 26 new unit tests for class node rendering and relationship styles, plus a model test, and updates all 61 E2E snapshot fixtures with the new
<defs>markers.
Reviewed changes
Copilot reviewed 7 out of 68 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
src/DiagramForge/Models/Edge.cs |
Adds SourceArrowHead property for source-end markers |
src/DiagramForge/Layout/DefaultLayoutEngine.cs |
Adds SizeClassNode method and AnnotationFontSizeRatio constant; routes class nodes to new sizing logic |
src/DiagramForge/Rendering/SvgRenderSupport.cs |
Adds three new SVG marker definitions in AppendDefs |
src/DiagramForge/Rendering/SvgStructureWriter.cs |
Expands AppendEdge to emit marker-start/marker-end based on SourceArrowHead/ArrowHead values |
src/DiagramForge/Rendering/SvgNodeWriter.cs |
Adds AppendClassNode method and AnnotationFontSizeRatio constant; branches to class rendering when compartments/annotations are present; suppresses standard label for class nodes |
tests/.../SvgClassDiagramRendererTests.cs |
New test file with 26 tests for class nodes and UML relationship rendering |
tests/.../DiagramModelTests.cs |
Adds Edge_SourceArrowHead_DefaultsToNone test |
tests/.../Fixtures/*.expected.svg (61 files) |
Updates <defs> with new markers; minor whitespace change in <path> elements |
You can also share your feedback on Copilot code review. Take the survey.
| // Width: widest of class name, annotations, or any compartment line | ||
| double maxTextWidth = EstimateTextWidth(node.Label.Text, fontSize); | ||
| foreach (var ann in node.Annotations) | ||
| maxTextWidth = Math.Max(maxTextWidth, EstimateTextWidth(ann.Text, annFontSize)); |
| string markerStart = edge.SourceArrowHead switch | ||
| { | ||
| ArrowHeadStyle.Diamond => """ marker-start="url(#arrowhead-filled-diamond)" """, | ||
| ArrowHeadStyle.Circle => """ marker-start="url(#arrowhead-open-diamond)" """, | ||
| _ => " ", | ||
| }; |
|
@copilot apply changes based on the comments in this thread |
Co-authored-by: jongalloway <68539+jongalloway@users.noreply.github.com>
Both fixes applied in a6e6215:
|
Teaches the SVG renderer to draw UML-style class boxes and the core relationship line/arrow variants required by Mermaid class diagrams. All changes are renderer + layout only — no parser dependency.
Model
Edge.SourceArrowHead(ArrowHeadStyle, defaultNone) — source-end marker for composition/aggregation diamonds, symmetric with the existingArrowHead(target end).Layout
SizeClassNode— computes node dimensions from annotation lines, class name, and per-compartment line counts. Called instead ofSizeStandardNodewhenNode.Compartments.Count > 0 || Node.Annotations.Count > 0.AnnotationFontSizeRatio = 0.85extracted as a named constant (shared between layout and renderer).Rendering
New SVG markers in
SvgRenderSupport.AppendDefs:arrowhead-openarrowhead-filled-diamondarrowhead-open-diamondSvgStructureWriter.AppendEdgenow emits the correctmarker-end/marker-startbased onArrowHeadandSourceArrowHeadvalues.SvgNodeWriter.AppendClassNode— new method rendering UML class boxes:rx=0outer rect (sharp UML corners)«stereotype»annotations above the class name<line>dividers above each compartmentTests
SvgClassDiagramRendererTests— compartment structure, stereotype rendering, sizing, and all 8 UML relationship types (inheritance, realization, composition, aggregation, association, link, dependency, dashed link).Edge_SourceArrowHead_DefaultsToNoneadded to model tests.<defs>section changes (three new marker definitions); no existing node/edge output affected.