Repository navigation
feat(c4): clickable $link for the unified renderer - #7863
filipsajdak wants to merge 10 commits into
Conversation
🦋 Changeset detectedLatest commit: 51ca02c The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
✅ Deploy Preview for mermaid-js ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
@mermaid-js/examples
mermaid
@mermaid-js/layout-elk
@mermaid-js/layout-tidy-tree
@mermaid-js/mermaid-zenuml
@mermaid-js/parser
@mermaid-js/tiny
commit: |
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## develop #7863 +/- ##
===========================================
+ Coverage 77.79% 77.91% +0.11%
===========================================
Files 409 412 +3
Lines 30328 30510 +182
Branches 5175 5213 +38
===========================================
+ Hits 23595 23772 +177
- Misses 5410 5411 +1
- Partials 1323 1327 +4
Flags with carried forward coverage won't be shown. Click here to find out more.
🚀 New features to boost your workflow:
|
|
The latest updates on your projects. Learn more about Argos notifications ↗︎
|
|
Heads-up: following @aloisklink's review on #7842, Track 1 has switched from the opt-in-flag approach to an in-place migration sliced by rendering layer (shapes -> edges -> layout) - see the updated plan in #7849. This slice is paused for now. Its branch is preserved as an archive tag ( |
b7f641f to
a8f0dc2
Compare
Converts the legacy C4 db state (c4ShapeArray / boundaries / rels) into the unified renderer LayoutData format: elements become nodes (db variants use cylinder, queue variants use h-cyl), boundaries become isGroup clusters with parentId nesting, and rels become edges. UpdateElementStyle and UpdateRelStyle map onto cssStyles/style/labelStyle preserving legacy semantics. Default fills come from the existing c4 config color keys so the palette matches the legacy renderer. Kept in a separate file so the legacy c4Db keeps its exact shape. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Adds an opt-in renderer for C4 diagrams that goes through the unified rendering pipeline (dagre by default, other algorithms such as ELK via registerLayoutLoaders), replacing the legacy statement-order grid with a real layout algorithm. The legacy row-based renderer stays the default, so existing diagrams render byte-identical unless the flag is set. - c4Renderer-unified.ts: renders getData() output via render() - c4Diagram.ts: dispatches between legacy and unified renderer - styles.js: CSS for the unified path (nodes, dashed boundary clusters, edges, edge labels, title), theme-variable driven - config.schema.yaml: new c4.useUnifiedRenderer flag (default false) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Renders C4 Person and Person_Ext elements with the classic C4 notation (circular head over a rounded box body) instead of a plain rectangle. The shape is registered in the shared shape registry as c4-person so other diagrams can reuse it. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Covers nested boundaries, UpdateElementStyle/UpdateRelStyle, db and queue shape variants, nested deployment nodes, and guards the rendered viewBox dimensions against layout blowups. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Add the C4-PlantUML macros AddElementTag(tagName, ?bgColor,
?fontColor, ?borderColor, ?shape) and AddRelTag(tagName, ?textColor,
?lineColor) to the grammar and store the definitions in the db
(getElementTags/getRelTags, reset in clear).
The unified renderer resolves the $tags of every element, boundary
and rel against the defined tags ('+' separated per C4-PlantUML,
commas accepted) and applies the tag colors between the per-type
config palette and the per-element UpdateElementStyle/UpdateRelStyle
overrides. Tag names are also exposed as c4-tag-<name> css classes on
the nodes for user styling. The legacy renderer ignores tags, as
documented.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Normalize $link values on elements and boundaries (which the legacy
db stores either as a plain string or a { text } object depending on
the positional slot) before passing them as node.link, where the
unified pipeline wraps the node in an anchor and honors
securityLevel (sandbox opens links in the top window).
$link on relationships is documented as unsupported: the unified
Edge type has no link field.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
a8f0dc2 to
51ca02c
Compare
|
Closing this PR. It was part of the original opt-in feature-slice approach for the C4 unified renderer. Following @aloisklink's review on #7842, that approach was superseded by an in-place migration sliced by rendering layer (shapes -> edges -> layout), tracked in #7849 (#7842 shapes, #7883 edges, layout PR to follow). This feature will be re-introduced on top of the migrated renderer once the layout slice lands. The branch is preserved as an archive tag ( |
1 participant
Summary
Makes
$linkon C4 elements clickable in the unified renderer. The legacy db stores attribute values ($link,$tags, ...) either as a plain string or wrapped in{ text }depending on the positional slot, so a smallC4Attributehelper (attributeText) normalises both forms before the link is attached to the node.Stacked on #7862 (AddElementTag/AddRelTag), which is stacked on #7842 - draft until those merge; the diff carries their commits until then. Tracked in #7849.
Slice commits (review by commit):
feat(c4): make $link clickable in the unified rendererchore: add changeset for c4 clickable links🤖 Generated with Claude Code