Skip to content

feat: Sequence diagram autonumber support - #171

Merged
jongalloway merged 3 commits into
mainfrom
copilot/add-autonumber-support-to-mermaid
Apr 17, 2026
Merged

jongalloway merged 3 commits into
mainfrom
copilot/add-autonumber-support-to-mermaid

Conversation

Copilot AI commented Apr 17, 2026 •

Copy link
Copy Markdown
Contributor

Adds support for Mermaid's autonumber keyword, rendering numbered circle badges on each sequence message row — useful for referencing steps in documentation.

sequenceDiagram
    autonumber
    A->>B: Login request
    B-->>A: Challenge
    A->>B: Credentials

Changes

Parser (MermaidSequenceParser)

  • Recognizes autonumber as a standalone line directive (case-insensitive)
  • Sets sequence:autonumber = true on the diagram metadata
  • Stores sequence:autonumberIndex (1-based) on each message edge that follows the directive — messages before the keyword are not numbered

Layout (DefaultLayoutEngine.Sequence)

  • Reserves 36px of extra left padding when autonumber is active so badges don't overlap participant boxes
  • Stores sequence:autonumberBadgeX for the renderer to consume

Rendering (SvgStructureWriter / SvgRenderer)

  • New AppendSequenceAutonumberBadges() renders filled circles (theme AccentColor) with bold number text at each message's Y position
  • Self-messages center the badge vertically within their 2× row height
  • Badges render after edge arrows but beneath participant boxes

Tests

  • 7 unit tests covering: metadata flag, case-insensitivity, per-edge index, sequential 1-based numbering, absent metadata when unused, and mid-diagram placement
  • E2E snapshot fixture (mermaid-sequence-autonumber) with dark theme, 5 messages including a self-message

Copilot AI linked an issue Apr 17, 2026 that may be closed by this pull request
Copilot AI changed the title [WIP] Add autonumber support for Mermaid sequence diagrams feat: Sequence diagram autonumber support Apr 17, 2026
Copilot AI requested a review from jongalloway April 17, 2026 01:23
@jongalloway
jongalloway marked this pull request as ready for review April 17, 2026 03:06
@jongalloway
jongalloway requested a review from Copilot April 17, 2026 03:06

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 autonumber directive and attach sequence:autonumber (diagram) plus sequence:autonumberIndex (per message edge).
  • Adjust sequence layout to reserve left space and publish sequence:autonumberBadgeX for 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

Comment on lines +12 to +15
// 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;

Copilot AI Apr 17, 2026

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copilot uses AI. Check for mistakes.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

@jongalloway
jongalloway merged commit 4a6c6a3 into main Apr 17, 2026
5 checks passed
@jongalloway
jongalloway deleted the copilot/add-autonumber-support-to-mermaid branch April 17, 2026 04:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Sequence diagram: autonumber support

3 participants