Repository navigation
feat: Sequence diagram autonumber support - #171
Conversation
Agent-Logs-Url: https://github.com/jongalloway/DiagramForge/sessions/52ad9581-b501-4704-ade0-aa4276592af9 Co-authored-by: jongalloway <68539+jongalloway@users.noreply.github.com>
There was a problem hiding this comment.
Pull request overview
Adds Mermaid sequence-diagram autonumber support end-to-end (parse → layout → SVG render), including new snapshot coverage to validate the rendered output.
Changes:
- Parse
autonumberdirective and attachsequence:autonumber(diagram) plussequence:autonumberIndex(per message edge). - Adjust sequence layout to reserve left space and publish
sequence:autonumberBadgeXfor rendering. - Render numbered circle badges at each message row (including self-message vertical centering) and add an E2E snapshot fixture.
Show a summary per file
| File | Description |
|---|---|
| tests/DiagramForge.Tests/Parsers/Mermaid/MermaidSequenceParserTests.cs | Adds unit tests verifying autonumber directive parsing and per-edge indexing behavior. |
| tests/DiagramForge.E2ETests/Fixtures/mermaid-sequence-autonumber.input | New E2E fixture input covering autonumber with multiple messages including a self-message. |
| tests/DiagramForge.E2ETests/Fixtures/mermaid-sequence-autonumber.expected.svg | New baseline snapshot validating badge rendering and layout spacing. |
| src/DiagramForge/Parsers/Mermaid/MermaidSequenceParser.cs | Implements autonumber directive parsing and metadata emission. |
| src/DiagramForge/Layout/DefaultLayoutEngine.Sequence.cs | Reserves additional left padding for badges and stores badge X coordinate. |
| src/DiagramForge/Rendering/SvgRenderer.cs | Inserts autonumber badge rendering pass between edges and nodes. |
| src/DiagramForge/Rendering/SvgStructureWriter.cs | Adds badge SVG emission (circle + number text), including self-message vertical centering. |
Copilot's findings
- Files reviewed: 6/7 changed files
- Comments generated: 1
| // Extra horizontal space reserved on the left when autonumber is active so that | ||
| // the numbered circle badge fits between the canvas edge and the first lifeline. | ||
| private const double SequenceAutonumberBadgeExtraLeft = 36; | ||
|
|
There was a problem hiding this comment.
SequenceAutonumberBadgeExtraLeft (36px) leaves only ~6px between the badge edge (r=12) and the participant box. In themes with node shadows/glows (e.g., cyberpunk/synthwave where ShadowStyle="glow" and ShadowBlur is 4–5), the node’s SVG filter extends beyond the node bounds and will visually overlap/obscure the autonumber badge because nodes render after badges. Consider deriving the extra-left padding from theme.UseNodeShadows / theme.ShadowStyle / theme.ShadowBlur (or increasing the constant) so badges remain clear across shadowed themes.
There was a problem hiding this comment.
Fixed in bbfd134. The extra left padding now accounts for shadow/glow themes: shadowExtra = SequenceAutonumberShadowClearanceMultiplier * theme.ShadowBlur (where the multiplier is 2.0, corresponding to the ~2σ visual extent of a Gaussian blur) is added to the base SequenceAutonumberBadgeExtraLeft whenever theme.UseNodeShadows is true. Both the badge center and the participant boxes shift proportionally, keeping the badge clear across all shadow styles including cyberpunk/synthwave glow themes.
Agent-Logs-Url: https://github.com/jongalloway/DiagramForge/sessions/dfefaa50-d8f8-49ad-abb1-1d30ee737758 Co-authored-by: jongalloway <68539+jongalloway@users.noreply.github.com>
Adds support for Mermaid's
autonumberkeyword, rendering numbered circle badges on each sequence message row — useful for referencing steps in documentation.Changes
Parser (
MermaidSequenceParser)autonumberas a standalone line directive (case-insensitive)sequence:autonumber = trueon the diagram metadatasequence:autonumberIndex(1-based) on each message edge that follows the directive — messages before the keyword are not numberedLayout (
DefaultLayoutEngine.Sequence)sequence:autonumberBadgeXfor the renderer to consumeRendering (
SvgStructureWriter/SvgRenderer)AppendSequenceAutonumberBadges()renders filled circles (themeAccentColor) with bold number text at each message's Y positionTests
mermaid-sequence-autonumber) with dark theme, 5 messages including a self-message