Add controls on mermaid diagrams - #1693
Open
Grafikart wants to merge 4 commits into
Open
Conversation
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
All reported issues were addressed
Reply with feedback, questions, or to request a fix.
Re-trigger cubic
Grafikart
force-pushed
the
feat/mermaid-zoom
branch
3 times, most recently
from
August 11, 2026 18:51
2af021a to
88e47ee
Compare
Grafikart
force-pushed
the
feat/mermaid-zoom
branch
from
August 12, 2026 09:23
e99d4eb to
f335413
Compare
Contributor
|
@Grafikart can we have it work with the documents tip tap editor mermaid block as well? |
Grafikart
force-pushed
the
feat/mermaid-zoom
branch
from
August 24, 2026 08:17
dabe918 to
b9b0f3d
Compare
Contributor
Author
@codenem It's done, tiptap mermaid preview now use the same component. |
Grafikart
force-pushed
the
feat/mermaid-zoom
branch
2 times, most recently
from
August 24, 2026 08:20
b9b0f3d to
d9ba7c8
Compare
Signed-off-by: Jonathan <contact@grafikart.fr>
Signed-off-by: Jonathan <contact@grafikart.fr>
Storybook treats each stories[] entry as its own specifier, so "!../src/v2/**" never ignored the v2 tree. Importing theme.css from preview.tsx also compiled it without Tailwind, which made @apply my-2 fail. Signed-off-by: Émile Ré <emile@probo.com>
codenem
force-pushed
the
feat/mermaid-zoom
branch
from
August 26, 2026 08:33
d9ba7c8 to
e2c0c98
Compare
Signed-off-by: Jonathan <contact@grafikart.fr>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Add controls to better visualize mermaid graphs inside markdown content
I chose to use a simpler library than d3 to limit the footprint for this first version.
Summary by cubic
Adds pan/zoom controls, fullscreen, and click-to-highlight for Mermaid diagrams in Markdown and the TipTap editor preview. Previously diagrams were static; now users can zoom via mouse or toolbar, reset, toggle fullscreen, and highlight nodes/edges, with background click clearing the selection.
Package:
ui+313-150Introduces a shared
MermaidDiagramthat usessvg-pan-zoom, adds a compact toolbar (zoom in/out, reset, fullscreen), preserves SVG aspect ratio with a minimum height, and handles fullscreen lifecycle. Adds delegated click interactions to emphasize a node with its neighbors and connecting edges, or an edge with its endpoints; background click resets. Replaces the editor’s custom preview withMermaidDiagramand simplifies related CSS (override global SVG sizing constraints). Updates Storybook to scope v1 stories (Atoms/Molecules/Layouts, root) and moves the theme import topreview.css. Adds Markdown stories with Mermaid examples.Other
+7-0Updates the lockfile to add the
svg-pan-zoomdependency.Written for commit c0c79e4. Summary will update on new commits.