Problem
Currently, when a user wants to propose a visual fix or UX improvement to a rendered diagram, they must:
Describe the change in plain text (imprecise)
Attach a manually edited screenshot from an external tool
Or submit a full code PR just to communicate intent
There is no native way to draw, highlight, or annotate on a rendered Mermaid output to say "this label should move here" or "this arrow overlaps this node — fix it like this."
Proposed solution
An annotation overlay that can be toggled on a rendered diagram — supporting arrows, boxes, freehand drawing, and text labels
A "Propose change" button in the Mermaid Live Editor that exports the annotated diagram as an image attachment ready to paste into a GitHub issue
Optionally: a sketch canvas embedded in the issue template for visual proposals (similar to Figma's comment mode or Excalidraw's embed)
Export format: PNG with annotations baked in, or SVG with an annotation layer
Problem
Currently, when a user wants to propose a visual fix or UX improvement to a rendered diagram, they must:
Describe the change in plain text (imprecise)
Attach a manually edited screenshot from an external tool
Or submit a full code PR just to communicate intent
There is no native way to draw, highlight, or annotate on a rendered Mermaid output to say "this label should move here" or "this arrow overlaps this node — fix it like this."
Proposed solution
An annotation overlay that can be toggled on a rendered diagram — supporting arrows, boxes, freehand drawing, and text labels
A "Propose change" button in the Mermaid Live Editor that exports the annotated diagram as an image attachment ready to paste into a GitHub issue
Optionally: a sketch canvas embedded in the issue template for visual proposals (similar to Figma's comment mode or Excalidraw's embed)
Export format: PNG with annotations baked in, or SVG with an annotation layer