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
Decision gist · record as of 2026-07-16
Excalidraw Visual Designer lets you create and edit diagrams, flowcharts, and architecture sketches directly in Excalidraw through an in-app browser. 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.
Use it when
- Yes.
- excalidraw-visual-designer provides an interactive approach: use the embedded browser to add shapes, connectors.
Verify before relying
Read SKILL.md below before installing (2 files). Open directory: indexed for reading, not audited.
Similar skills
Install
guanyang/super-publisher/excalidraw-visual-designer · repository language: TypeScript
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
File tree — 2 files
skills/excalidraw-visual-designer/SKILL.md
skills/excalidraw-visual-designer/scripts/make_excalidraw_clipboard.py
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Create editable diagrams, flowcharts, and architecture sketches in Excalidraw”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Diagram Maker transforms descriptions into visual diagrams across three formats: clean SVG for educational and process concepts, architecture SVG for software and infrastructure topology, and Excalidraw for editable collaborative sketches. The skill intelligently routes your request to the best output format and generates standalone, browser-ready files with semantic styling and clear layouts.
Excalidraw is a whiteboard-style diagram editor for building flowcharts, architecture diagrams, system designs, and visual sketches. It provides tools to add shapes, arrows, frames, and organize elements with alignment and distribution. Use it for any visual diagram except database schemas, which should use DataModelLM instead.
Build flowcharts, wireframes, system diagrams, and other visual documentation in Excalidraw's distinctive hand-drawn style. The skill outputs .excalidraw.json files that open directly in Excalidraw or any compatible viewer, handling layout, positioning, text centering, and arrow routing automatically.
Excalidraw Studio converts natural language into professional diagrams—flowcharts, mind maps, architecture designs, ER models, and more—saved as .excalidraw files ready to open in Excalidraw, VS Code, or Obsidian. Choose from sketch, clean, or mixed visual modes and leverage built-in templates for rapid diagram generation.
Build sketchy, hand-drawn diagrams by composing Excalidraw element JSON and saving them as .excalidraw files. Open files directly at excalidraw.com or upload for shareable links—no accounts or API keys required. Supports rectangles, ellipses, diamonds, arrows, and labeled shapes with a built-in color palette for flowcharts, architecture diagrams, and concept maps.
This skill transforms text content into Excalidraw diagrams optimized for Obsidian, supporting flowcharts, mind maps, hierarchies, relationships, comparisons, timelines, matrices, and freeform layouts. It analyzes your input, selects the appropriate diagram type, generates valid Excalidraw JSON, and automatically saves the result as an Obsidian-ready markdown file with proper formatting and styling.