How to Create Wireframes and UI Mockups in Confluence with Excalidraw Plus

Wireframes are the backbone of every user interface design process. They let product managers, designers, and engineers align on layout, content hierarchy, and interaction flow before writing a single line of code. With Excalidraw Plus for Confluence, you can create wireframes and UI mockups directly inside your Confluence pages, keeping design artifacts next to requirements, user stories, and technical specs.

This tutorial walks through the full wireframing workflow in Excalidraw Plus: from setting up a grid and building component patterns to prototyping multi-screen flows and collaborating with your team. By the end, you will have a repeatable process for producing professional wireframes without leaving Confluence.

Why wireframe in Confluence?

Most teams already use Confluence for product requirements, sprint planning, and technical documentation. Storing wireframes in a separate design tool creates friction: links break, versions drift, and non-designers struggle to access files. Excalidraw Plus eliminates that gap by embedding a full drawing canvas into any Confluence page.

Key advantages:

• Zero context switching: Design and document in the same environment. Stakeholders view wireframes inline without opening external tools or downloading files.
• Automatic version history: Confluence tracks page revisions, so every wireframe iteration is preserved and recoverable.
• Collaboration by default: Anyone with page access can view the wireframe. Editors can open the Excalidraw canvas to suggest changes or add annotations.
• Export flexibility: Export wireframes as PNG or SVG for presentations, or keep them as JSON backups for archival.

Prerequisites

Before you start, make sure you have the following:

• A Confluence Cloud instance with admin or space-level permissions to install apps.
• Excalidraw Plus for Confluence installed from the Atlassian Marketplace.
• A Confluence page where you want to embed your wireframe (a product requirements page, epic description, or dedicated design spec page all work well).

Step 1 -- Install Excalidraw Plus for Confluence

If your team has not installed the app yet:

1. Log in to your Confluence instance as an administrator.
2. Navigate to the Atlassian Marketplace (or go to Settings then Manage apps).
3. Search for "Excalidraw Plus for Confluence".
4. Click Get app or Try it free and follow the installation wizard.

The app installs a macro that you can insert on any Confluence page. No additional browser extensions or desktop software are required.

Step 2 -- Insert the Excalidraw macro on a Confluence page

Once the app is installed, adding a wireframe canvas takes seconds:

1. Open the Confluence page where you want the wireframe and click Edit.
2. Type /excalidraw in the editor body and select Excalidraw Plus from the macro dropdown. You can also click the + button in the toolbar, search for "Excalidraw Plus", and click to insert.
3. The Excalidraw editor opens inline on your page. You now have a full drawing canvas with shapes, text, arrows, freehand tools, and a library panel.

The editor supports the full Excalidraw feature set: rectangles, diamonds, circles, arrows, lines, freehand pencil, text labels, and color styling.

Step 3 -- Set up a layout grid for your wireframe

Precision matters in wireframing. Misaligned elements distract reviewers and make layouts harder to interpret. Excalidraw Plus includes grid and snap features that keep your wireframes clean.

Enable the grid

1. Open the Excalidraw editor on your page.
2. Toggle the grid option in the canvas settings. A dot-grid or line-grid overlay appears on the canvas.
3. Enable snap to grid so that shapes and text snap to grid intersections as you drag them.

Choose your grid rhythm

For most web wireframes, a 12-column grid at 60-80 pixel column width works well. While Excalidraw does not enforce a specific column count, you can simulate one by:

• Drawing thin vertical guide lines at equal intervals to mark column boundaries.
• Grouping the guide lines together so they move as a single unit.
• Locking the guide group to prevent accidental edits.

For mobile wireframes, use a narrower canvas (roughly 375-428 pixels wide) and a 4-column grid.

Tips for grid-based layouts

• Consistent spacing: Use the same gap between elements throughout the wireframe. A 16-pixel or 24-pixel spacing rhythm is standard in most design systems.
• Alignment: Align text labels and shape edges to the same grid lines. This visual consistency makes wireframes easier to scan.
• Bounding boxes: Draw a large rectangle to represent the browser viewport or mobile screen, then place all components inside it. This frames the wireframe and clarifies the intended canvas size.

Step 4 -- Build wireframe components using shape libraries

Excalidraw Plus provides a library panel with pre-made shapes. For wireframing, you will primarily use basic geometric shapes combined with text labels to represent UI components. Below are the core component patterns you can build.

Buttons

Buttons are the most common interactive element. To create a wireframe button:

1. Draw a rounded rectangle (use the rectangle tool, then adjust corner radius).
2. Add a text label centered inside the rectangle (for example, "Submit", "Cancel", "Add to Cart").
3. Style the fill color to indicate button hierarchy: a solid fill for primary actions, a border-only outline for secondary actions, and a lighter fill for tertiary or ghost buttons.

Button variations to include in your wireframe library:

Button type	Visual treatment	Use case
Primary	Solid fill, white text	Main CTA (Submit, Save, Confirm)
Secondary	Border outline, dark text	Alternative actions (Cancel, Back)
Destructive	Red solid fill	Dangerous actions (Delete, Remove)
Icon button	Small square or circle with icon placeholder	Toolbar actions
Toggle	Rounded rectangle that switches fill state	On/off settings

Form inputs

Forms are central to most applications. To wireframe a form field:

1. Draw a rectangle with a thin border to represent the input box.
2. Add a small text label above or to the left of the box (for example, "Email Address", "Password").
3. Optionally draw a thin line inside the box to hint at placeholder text (for example, a faint "user@example.com").
4. For dropdowns, add a small triangle or chevron shape at the right edge of the input box.

Form input patterns:

Input type	Wireframe representation
Text input	Rectangle with label above
Textarea	Taller rectangle with multiple faint lines inside
Dropdown	Rectangle with small downward triangle at right
Checkbox	Small square with optional checkmark line inside
Radio button	Small circle with optional filled inner circle
Toggle switch	Rounded rectangle with a small circle inside
File upload	Dashed rectangle with an upward arrow icon placeholder

Navigation bars

Navigation bars establish the page structure. To create a top navigation wireframe:

1. Draw a horizontal rectangle spanning the full width of your viewport frame.
2. Add a text label or logo placeholder (a small rectangle) on the left side.
3. Add text labels for each nav item spaced evenly across the bar.
4. Optionally underline or bold one item to indicate the active page.

For side navigation:

1. Draw a vertical rectangle along the left edge of the viewport.
2. Stack small rectangles or text labels vertically inside the sidebar to represent menu items.
3. Add indentation (offset text labels to the right) to indicate nested sub-items.

Cards

Cards are ubiquitous in modern UI design. To wireframe a card component:

1. Draw a rounded rectangle for the card container.
2. Add a thin horizontal line or spacing near the top to separate a header area.
3. Place a smaller rectangle or image placeholder in the upper portion for a thumbnail or hero image.
4. Add text lines below the image placeholder to represent a title (one thicker line) and description (two or three thinner lines).
5. Optionally add a row of small shapes at the bottom to represent action buttons or metadata (date, tags, author).

Card pattern layout (textual description):

+--------------------------------------+
|  [Image placeholder - gray rectangle]|
|                                      |
+--------------------------------------+
|  Title line (bold, single line)      |
|  Description line 1 (thinner)        |
|  Description line 2 (thinner)        |
+--------------------------------------+
|  [Tag]  [Tag]          [Action btn]  |
+--------------------------------------+

Modals and dialogs

Modal overlays draw attention to critical actions. To wireframe a modal:

1. Draw a semi-transparent rectangle covering the full viewport to represent the backdrop overlay.
2. On top of it, draw a centered rounded rectangle for the modal container.
3. Add a header row with a title and an "X" close icon (a small circle or cross).
4. Add content area with text lines or form inputs.
5. Add a footer row with action buttons (for example, "Cancel" and "Confirm").

Modal pattern layout:

+============================================+
|  Modal Title                         [X]  |
|--------------------------------------------|
|                                            |
|  Content area: text, form fields,          |
|  or other components go here.              |
|                                            |
|--------------------------------------------|
|                     [Cancel]  [Confirm]    |
+============================================+

Tables and data grids

For data-heavy interfaces, wireframe tables using:

1. A large rectangle as the table container.
2. A darker or thicker row at the top for column headers.
3. Horizontal lines dividing rows.
4. Vertical lines dividing columns.
5. Small icon shapes in header cells to indicate sortable columns (tiny triangles).

Reusable component tips

• Group elements: Select all shapes that make up a component (for example, the card rectangle, its image placeholder, and text lines), then group them. Grouped elements move and resize together.
• Duplicate for consistency: Once you build one card, duplicate it to create additional cards with the same proportions. This maintains visual consistency across your wireframe.
• Save to library: Save frequently used components to the Excalidraw library panel so you can drag them into future wireframes without rebuilding from scratch.
• Use consistent colors: Limit your palette to 3-4 grayscale tones plus one accent color. Wireframes should be low-fidelity; color should indicate interaction states, not final visual design.

Step 5 -- Create multi-screen wireframe flows

A single screen rarely tells the full story. Most user workflows span multiple pages or states. Excalidraw Plus makes it easy to lay out multiple wireframe screens on a single canvas.

Organize screens on the canvas

1. Space viewport frames horizontally (left to right) to represent the primary user flow.
2. Draw arrows between frames to indicate navigation or state transitions.
3. Label each arrow with the trigger action (for example, "User taps Submit", "System loads results", "Error state").
4. Add screen titles above each viewport frame (for example, "Screen 1: Login", "Screen 2: Dashboard", "Screen 3: Error").

Annotate interaction details

Use text callouts and arrows to explain interactions that are not obvious from the visual layout alone:

• Hover states: Draw a small annotation box next to an element that says "On hover: tooltip appears" or "On hover: button changes to filled state."
• Error states: Duplicate a form screen and add red-highlighted error messages below the relevant fields. Connect it to the normal state with a labeled arrow.
• Loading states: Draw a skeleton screen or spinner placeholder to show what the user sees while data loads.

Prototyping workflow tips

While Excalidraw Plus does not generate clickable prototypes, you can simulate a prototyping workflow within Confluence:

1. Create a dedicated wireframe page: Use a parent page titled "Wireframes -- [Feature Name]" and add child pages for each major flow.
2. Link screens: Use Confluence page links or anchor links to connect related wireframe pages, creating a navigable prototype experience.
3. Embed multiple macros: Place several Excalidraw macros on the same page, each containing a different screen or state. Add text descriptions between them to narrate the user journey.
4. Review cycle: Ask stakeholders to add comments directly on the Confluence page. Inline comments can reference specific wireframe screens by position or label.
5. Version tracking: Each time you publish the page, Confluence creates a revision. Use the page history to compare wireframe iterations over time.

Wireframe fidelity levels

Different stages of the design process call for different levels of detail. Excalidraw Plus supports the full spectrum.

Low-fidelity wireframes

Best for early exploration and brainstorming.

• Use simple rectangles and lines only.
• Omit real text; use placeholder lines (gray bars) to represent content.
• Focus on layout and hierarchy, not visual polish.
• Build quickly to evaluate multiple layout options side by side.

Medium-fidelity wireframes

Best for stakeholder reviews and requirements documentation.

• Add realistic text labels (actual button copy, headings, form field names).
• Include component patterns (proper button styles, navigation structure, card layouts).
• Annotate with interaction notes and state descriptions.
• Use consistent spacing and alignment via the grid.

High-fidelity mockups

Best for handoff to developers or visual designers.

• Apply realistic proportions and pixel-accurate spacing.
• Include actual content (real text, image placeholders with correct aspect ratios).
• Use grayscale plus one accent color to distinguish interactive elements.
• Add detailed annotations for animations, transitions, and responsive breakpoints.

Wireframing best practices

Keep these principles in mind as you build wireframes in Confluence:

Start with content, not chrome

Before drawing navigation bars and footers, list the content that each screen needs to display. Arrange content blocks first, then wrap them in chrome (headers, sidebars, footers). This prevents the layout from dictating the content.

Use real text, not lorem ipsum

Realistic text helps stakeholders evaluate whether the layout accommodates actual content. If real copy is not available, use text that matches the expected length and tone. "Lorem ipsum" obscures content fit issues.

Label everything

Add text labels to every interactive element, even in low-fidelity wireframes. Reviewers should never have to guess what a shape represents. A button that says "Primary CTA" is clearer than an unlabeled rectangle.

Show multiple states

Do not wireframe only the happy path. Include error states, empty states, loading states, and edge cases. This catches usability problems early and gives developers a complete picture of what to build.

Keep wireframes separate from visual design

Wireframes communicate structure and interaction, not visual aesthetics. Avoid spending time on colors, fonts, or pixel-perfect alignment at the wireframe stage. Save visual refinement for a dedicated design tool or a later iteration.

Organize your Confluence wireframe library

Over time, your team will accumulate a set of reusable wireframe components. Keep them organized:

• Create a Confluence space or parent page dedicated to wireframe libraries.
• Store frequently used Excalidraw component groups as separate macro instances that team members can copy.
• Use consistent naming conventions for wireframe pages (for example, "Wireframe: [Feature] -- [Screen] -- [State]").
• Tag wireframe pages with a common label so they are easy to find via Confluence search.

Exporting and sharing wireframes

Excalidraw Plus supports multiple export formats:

• PNG: Best for embedding wireframes in presentations, emails, or external documents. Use a transparent background if you plan to overlay the wireframe on other content.
• SVG: Best for scalable wireframes that need to look crisp at any size. SVG is also editable in vector tools like Figma, Sketch, or Illustrator.
• JSON: Use JSON export to create backups of your wireframes or to transfer them between Confluence instances.

To export, click the menu icon in the Excalidraw editor and choose your preferred format. The exported file preserves all shapes, text, and styling.

Common wireframe patterns for popular layouts

Here are textual descriptions of common layout patterns you can recreate in Excalidraw Plus.

Dashboard layout

+----------------------------------------------------------+
| [Logo]  Nav Item 1  Nav Item 2  Nav Item 3    [Avatar]  |
+----------+-----------------------------------------------+
|          |  +----------+  +----------+  +----------+     |
| Sidebar  |  | Metric   |  | Metric   |  | Metric   |     |
| Menu     |  | Card 1   |  | Card 2   |  | Card 3   |     |
| Items    |  +----------+  +----------+  +----------+     |
|          |  +-------------------------------------------+|
|          |  |                                           ||
|          |  |        Chart / Data Visualization         ||
|          |  |                                           ||
|          |  +-------------------------------------------+|
+----------+-----------------------------------------------+

Build this by drawing a top navigation bar, a left sidebar with stacked text items, metric cards (small rounded rectangles with number labels), and a large chart area (a rectangle with grid lines to suggest a graph).

E-commerce product page layout

+----------------------------------------------------------+
| [Logo]  Home  Categories  Sale          [Search] [Cart]  |
+----------------------------------------------------------+
|                          |                                |
|  [Product Image          |  Product Title                |
|   Placeholder]           |  $XX.XX                       |
|                          |  [Variant selector]            |
|                          |  [Quantity] [Add to Cart btn]  |
|                          |  Description text lines...     |
+----------------------------------------------------------+
|  Related Products                                        |
|  [Card 1]  [Card 2]  [Card 3]  [Card 4]                 |
+----------------------------------------------------------+

Use a split layout (two columns in the upper section) with an image placeholder on the left and product details on the right, followed by a full-width related products row.

Settings page layout

+----------------------------------------------------------+
| [Logo]  Dashboard  Projects         [Avatar] [Settings]  |
+----------+-----------------------------------------------+
|          |  Account Settings                             |
| Profile  |  +-------------------------------------------+|
| Security |  | Field Label                               ||
| Notif.   |  | [Input field                        ]     ||
| Billing  |  +-------------------------------------------+|
| API Keys |  | Field Label                               ||
|          |  | [Input field                        ]     ||
|          |  +-------------------------------------------+|
|          |              [Save Changes]                    |
+----------+-----------------------------------------------+

Draw a vertical sidebar with settings categories and a main content area with stacked form field patterns.

Collaborating on wireframes in Confluence

One of the biggest advantages of wireframing inside Confluence is the collaboration workflow:

1. Inline comments: Team members can add Confluence comments directly on the page, referencing specific wireframe sections. Use @mentions to loop in designers, developers, or product managers.
2. Page history: Every save creates a new version. Compare versions to see what changed between iterations. This is especially useful during design reviews.
3. Permissions: Control who can edit the wireframe versus who can only view it using Confluence page restrictions.
4. Integration with Jira: Link wireframe pages to Jira epics or stories. Developers can open the wireframe directly from the issue, ensuring the design context is always accessible.
5. Notifications: When you update and republish the wireframe page, watchers receive a notification. This keeps stakeholders informed without manual status emails.

Troubleshooting common issues

Issue	Solution
Wireframe does not render in page view	Click outside the Excalidraw editor, save the Confluence page, and wait for the sync confirmation.
Shapes appear misaligned	Enable the grid and snap-to-grid, then reposition elements.
Canvas is too small for multi-screen flows	Scroll to the edge of the canvas and drag outward. Excalidraw canvases expand infinitely.
Exported PNG is blurry	Use SVG export instead, or increase the zoom level before exporting.
Cannot find the macro in the editor	Confirm the app is installed under Settings then Manage apps. Try typing /excalidraw directly.
Library panel is empty	Load a built-in library from the library menu, or create and save your own component groups.

Related resources

• Excalidraw Plus for Confluence -- documentation
• Excalidraw best practices FAQ
• Confluence whiteboard apps -- which one fits your team?
• How to create architecture diagrams in Confluence
• How to create flowcharts in Confluence
• Confluence diagram tools compared