An endless hand-drawn canvas to sketch, plan, and explain — from flowcharts and wireframes to quick notes and brainstorms.
Start from
Practical guides to help you create better diagrams
Infinite zoom
Pan and zoom without limits.
Snap & align
Guides and alignment helpers.
Natural connectors
Smart routing for arrows.
Hand-drawn style
Sketchy, organic look.
Shortcuts
⌘K and ? for power users.
Export/share
PNG, SVG, and links.
Capture ideas on an endless canvas with sticky notes, shapes, and freehand drawing. No structure required — just think out loud, visually.
Sketch microservice architectures, API flows, and infrastructure diagrams. Perfect for technical discussions and documentation.
Quickly draft UI layouts and screen flows. The hand-drawn style keeps the focus on structure, not pixel perfection.
Map out processes, decision trees, and system flows with shapes, connectors, and hand-drawn style — no design skills needed.
No signup required. Open the editor and start drawing in seconds — zero friction.
A sketchy, organic style that makes diagrams feel approachable and keeps early-stage ideas looking like ideas.
Keyboard shortcuts, snapping, smart connectors — built for people who value efficiency.
Connect Cursor, Claude, or any MCP-compatible AI to create and edit diagrams with natural language.
Quick guide to CodePic
CodePic is an online infinite whiteboard for visual thinking. It keeps quick sketches, flowcharts, wireframes, system diagrams, notes, and AI-generated drafts editable on the same canvas.
CodePic is a browser-based infinite whiteboard with a hand-drawn style. You can open a blank board, sketch ideas with shapes and freehand drawing, connect nodes with arrows, or start from templates for flowcharts, ER diagrams, wireframes, timelines, and planning boards.
CodePic is useful for visual notes, brainstorming, product planning, system architecture, flowcharts, entity relationship diagrams, wireframes, timelines, and lightweight documentation. The same board can mix sticky notes, text, shapes, connectors, drawings, and templates.
Traditional diagram tools often start from rigid diagram types. CodePic starts from an open whiteboard: diagrams are content on the canvas, not the boundary of the product. This makes it easier to move from messy thinking to structured diagrams without switching tools.
CodePic supports structured diagram data and an MCP server, so AI coding assistants can generate editable diagrams instead of static images. You can ask an AI tool to create a draft, then open it in CodePic to refine the layout, labels, colors, and connectors.
Want to learn more? Explore the product overview, template gallery, and MCP server.
Start with a blank canvas or pick a template — it only takes a few seconds.