excalidraw-visual-designer
Build and refine visual diagrams, flowcharts, architecture maps, and infographics directly in Excalidraw using an embedded browser. The skill manages layout, connector routing, and editable elements to keep your designs clean and legible. Import complex scenes via clipboard JSON or construct them interactively, then finalize with all elements ready for further editing.
Excalidraw Visual Designer lets you create and edit diagrams, flowcharts, and architecture sketches directly in Excalidraw through an in-app browser.
AI-generated summary based on this skill's SKILL.md
Install
guanyang/super-publisher/excalidraw-visual-designer · repository language: TypeScript
git clone https://github.com/guanyang/super-publisher
cp -r super-publisher/skills/excalidraw-visual-designer ~/.claude/skills/excalidraw-visual-designerFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I create a flowchart in excalidraw-visual-designer?
excalidraw-visual-designer lets you build flowcharts directly in an embedded Excalidraw canvas. Start by adding shapes (rectangles, diamonds, circles) for your process steps, connect them with arrows and connectors, and label each element. The skill manages layout and connector routing to keep your flowchart clean and legible. Once complete, your flowchart remains fully editable within Excalidraw.
Can excalidraw-visual-designer help me design an infographic?
Yes. excalidraw-visual-designer supports designing infographics, teaching visuals, and product explanation graphics. You can combine shapes, text, icons, and connectors to build visually engaging layouts. The skill handles element positioning and routing so your infographic stays organized and readable, and you can refine it further by editing directly in the Excalidraw interface.
What is the best way to draw a diagram using excalidraw?
excalidraw-visual-designer provides an interactive approach: use the embedded browser to add shapes, connectors, and labels for your diagram. The skill manages layout and connector routing automatically, keeping your design clean. You can also import complex visual scenes via clipboard JSON for fast rendering if you have a pre-structured design ready.
Can I update an existing excalidraw canvas with improved layouts?
Absolutely. excalidraw-visual-designer supports revising and updating existing Excalidraw canvases. You can refine layouts, reposition elements, adjust connectors, and improve overall legibility. All your changes remain editable, so you can continue iterating until your diagram, flowchart, or infographic meets your needs.
Does excalidraw-visual-designer work for promotional materials?
Yes. excalidraw-visual-designer can build promotional materials, posters, flyers, and social media graphics. Combine shapes, text, and visual elements to create eye-catching designs. The skill manages layout and positioning to ensure your promotional content is well-organized and ready for further customization or export.
How does importing JSON help with excalidraw-visual-designer?
excalidraw-visual-designer supports importing complex visual scenes via clipboard JSON for fast rendering. If you have a pre-structured design in JSON format, you can paste it directly to populate your canvas instantly, rather than building from scratch. This accelerates workflows when you're working with existing or template-based designs.
SKILL.md
rendered from the published skill — quoted content, verbatim
Excalidraw Visual Designer
Core Workflow
Use the in-app browser and the existing Excalidraw tab when present.
- Read and follow the
browser:control-in-app-browserskill before controlling the browser. - Claim the existing
https://excalidraw.com/tab instead of opening a duplicate. - Keep the browser visible when the user is reviewing the drawing.
- Prefer Excalidraw clipboard JSON import over manual dragging for complex layouts.
- After each substantial visual change, take a screenshot and inspect it for legibility, overlap, and visual quality.
- Finalize with the Excalidraw tab kept as
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 2 files
skills/excalidraw-visual-designer/SKILL.md
skills/excalidraw-visual-designer/scripts/make_excalidraw_clipboard.py