Stats

Actions

Tags

Help us improve

Share bugs, ideas, or general feedback.

Wireframes & Mockups | drawio-diagramming

Skill

Wireframes & Mockups

From drawio-diagramming

Generates UI/UX wireframes and mockups in draw.io at lo-fi, mid-fi, hi-fi fidelity levels using mockup shape libraries, frames for browser, iOS/Android mobile, and tablets.

$

npx claudepluginhub markus41/claude --plugin drawio-diagramming

Popularity

Parent stars

12

Parent forks

1

Invocation

How this skill is triggered — by the user, by Claude, or both

Slash command

/drawio-diagramming:wireframes-mockups

User invocable

Model invocable

Inline context

Default effort

Context Preview

The summary Claude sees in its skill listing — used to decide when to auto-load this skill

| Level | Purpose | Detail | When to Use |

SKILL.md

484 lines · ~6.2k tokens(exceeds 5k compaction limit)

Similar Skills

wireframe

67

Creates and renders UI wireframes from Markdown using wiremd. Converts descriptions, Jira tickets, PRDs, or React/JSX into visual HTML mockups for prototyping screens.

13 files

wireframe

12

Creates wireframes for UI mockups using SVG for precise layouts or HTML/Tailwind for standard UI patterns. Use for wireframing, mockups, skeletal layouts.

20 files2 tools

draft-wireframe

41

Wireframes UI screens in ASCII text (default) or hand-drawn HTML (on 'sketch', 'whiteboard' keywords). Outputs buildable specs or visual whiteboard-style files.

11 tools

Stats

LanguageTypeScript

Parent stars12

Parent forks1

MaintenanceExcellent

Last CommitMar 28, 2026

Actions

View Source View Plugin View on GitHub View README

Tags

Help us improve

Share bugs, ideas, or general feedback.

Wireframes & Mockups

Fidelity Levels

Level	Purpose	Detail	When to Use
Lo-fi	Concept exploration	Gray boxes, placeholder text, no color	Early ideation, stakeholder alignment
Mid-fi	Layout validation	Real labels, basic styling, grayscale	Design review, developer handoff prep
Hi-fi	Visual design	Brand colors, icons, realistic content	Client presentation, pixel-perfect handoff

draw.io UI Shape Libraries

Enable wireframe shapes in draw.io: File > Open Library > wireframe or search "mockup" in shapes panel.

Built-in Mockup Libraries

Library	Prefix	Contains
Mockup Buttons	`mxgraph.mockup.buttons`	Buttons, toggles, radio, checkboxes
Mockup Containers	`mxgraph.mockup.containers`	Windows, dialogs, panels, cards
Mockup Forms	`mxgraph.mockup.forms`	Input fields, dropdowns, sliders, search bars
Mockup Graphics	`mxgraph.mockup.graphics`	Icons, avatars, image placeholders
Mockup Markup	`mxgraph.mockup.markup`	Headlines, paragraphs, lists, links
Mockup Navigation	`mxgraph.mockup.navigation`	Navbars, tabs, breadcrumbs, sidebars
Mockup Text	`mxgraph.mockup.text`	Labels, tooltips, badges
Android	`mxgraph.android`	Android-native UI components
iOS	`mxgraph.ios7`	iOS-native UI components
Bootstrap	`mxgraph.bootstrap`	Bootstrap grid, components

Common Component Styles

Browser Window Frame

<mxGraphModel>
  <root>
    <mxCell id="0"/>
    <mxCell id="1" parent="0"/>
    <!-- Browser chrome -->
    <mxCell id="browser" value="My App - Chrome" style="shape=mxgraph.mockup.containers.browserWindow;whiteSpace=wrap;html=1;fillColor=#FFFFFF;strokeColor=#666666;mainText=;fontSize=12;" vertex="1" parent="1">
      <mxGeometry x="40" y="40" width="800" height="560" as="geometry"/>
    </mxCell>
  </root>
</mxGraphModel>

Mobile Phone Frame (iPhone)

<mxCell id="phone" value="" style="shape=mxgraph.ios7.phone;fillColor=#FFFFFF;strokeColor=#333333;" vertex="1" parent="1">
  <mxGeometry x="40" y="40" width="240" height="480" as="geometry"/>
</mxCell>

Android Phone Frame

<mxCell id="android" value="" style="shape=mxgraph.android.phone2;fillColor=#FFFFFF;strokeColor=#333333;" vertex="1" parent="1">
  <mxGeometry x="40" y="40" width="240" height="480" as="geometry"/>
</mxCell>

Tablet Frame (iPad)

<mxCell id="tablet" value="" style="shape=mxgraph.ios7.ipad;fillColor=#FFFFFF;strokeColor=#333333;" vertex="1" parent="1">
  <mxGeometry x="40" y="40" width="480" height="640" as="geometry"/>
</mxCell>

Lo-fi Wireframe Patterns

Style Rules

Fill: fillColor=#F5F5F5; (light gray) or fillColor=none;
Stroke: strokeColor=#999999; (medium gray)
Text: fontColor=#666666;fontSize=12;fontFamily=Helvetica;
No shadows, no gradients, no brand colors
Use X pattern for image placeholders: shape=mxgraph.mockup.graphics.simpleIcon;

Page Layout (Lo-fi)

<mxGraphModel>
  <root>
    <mxCell id="0"/>
    <mxCell id="1" parent="0"/>
    <!-- Header bar -->
    <mxCell id="header" value="Logo" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#E0E0E0;strokeColor=#999999;fontColor=#666666;fontSize=14;fontStyle=1;" vertex="1" parent="1">
      <mxGeometry x="0" y="0" width="800" height="60" as="geometry"/>
    </mxCell>
    <!-- Navigation -->
    <mxCell id="nav1" value="Home" style="text;html=1;fillColor=none;strokeColor=none;fontColor=#666666;fontSize=12;" vertex="1" parent="1">
      <mxGeometry x="120" y="18" width="60" height="24" as="geometry"/>
    </mxCell>
    <mxCell id="nav2" value="Products" style="text;html=1;fillColor=none;strokeColor=none;fontColor=#666666;fontSize=12;" vertex="1" parent="1">
      <mxGeometry x="200" y="18" width="80" height="24" as="geometry"/>
    </mxCell>
    <mxCell id="nav3" value="About" style="text;html=1;fillColor=none;strokeColor=none;fontColor=#666666;fontSize=12;" vertex="1" parent="1">
      <mxGeometry x="300" y="18" width="60" height="24" as="geometry"/>
    </mxCell>
    <!-- Hero section -->
    <mxCell id="hero" value="Hero Image Area" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#F5F5F5;strokeColor=#CCCCCC;strokeWidth=2;dashed=1;fontColor=#999999;fontSize=16;" vertex="1" parent="1">
      <mxGeometry x="0" y="60" width="800" height="300" as="geometry"/>
    </mxCell>
    <!-- Content cards -->
    <mxCell id="card1" value="&lt;b&gt;Card Title&lt;/b&gt;&lt;br&gt;Description text here" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#F5F5F5;strokeColor=#CCCCCC;align=left;verticalAlign=top;spacingLeft=12;spacingTop=8;" vertex="1" parent="1">
      <mxGeometry x="20" y="380" width="240" height="140" as="geometry"/>
    </mxCell>
    <mxCell id="card2" value="&lt;b&gt;Card Title&lt;/b&gt;&lt;br&gt;Description text here" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#F5F5F5;strokeColor=#CCCCCC;align=left;verticalAlign=top;spacingLeft=12;spacingTop=8;" vertex="1" parent="1">
      <mxGeometry x="280" y="380" width="240" height="140" as="geometry"/>
    </mxCell>
    <mxCell id="card3" value="&lt;b&gt;Card Title&lt;/b&gt;&lt;br&gt;Description text here" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#F5F5F5;strokeColor=#CCCCCC;align=left;verticalAlign=top;spacingLeft=12;spacingTop=8;" vertex="1" parent="1">
      <mxGeometry x="540" y="380" width="240" height="140" as="geometry"/>
    </mxCell>
    <!-- Footer -->
    <mxCell id="footer" value="Footer" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#E0E0E0;strokeColor=#999999;fontColor=#666666;fontSize=12;" vertex="1" parent="1">
      <mxGeometry x="0" y="540" width="800" height="40" as="geometry"/>
    </mxCell>
  </root>
</mxGraphModel>

Mid-fi Wireframe Patterns

Style Rules

Fill: White (#FFFFFF) with light gray accents (#F5F5F5)
Stroke: strokeColor=#CCCCCC; or #AAAAAA
Primary action: fillColor=#333333;fontColor=#FFFFFF; (dark button)
Text: fontColor=#333333;fontSize=13;fontFamily=Inter;
Subtle shadows: shadow=0; (still no shadows at mid-fi)
Real labels and content, no "Lorem ipsum"

Form Example (Mid-fi)

<mxGraphModel>
  <root>
    <mxCell id="0"/>
    <mxCell id="1" parent="0"/>
    <!-- Form container -->
    <mxCell id="form" value="Create Account" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#FFFFFF;strokeColor=#CCCCCC;verticalAlign=top;fontStyle=1;fontSize=16;fontColor=#333333;spacingTop=12;align=center;" vertex="1" parent="1">
      <mxGeometry x="200" y="40" width="400" height="420" as="geometry"/>
    </mxCell>
    <!-- Email field -->
    <mxCell id="emailLabel" value="Email address" style="text;html=1;fillColor=none;strokeColor=none;fontColor=#666666;fontSize=12;align=left;" vertex="1" parent="1">
      <mxGeometry x="230" y="90" width="120" height="20" as="geometry"/>
    </mxCell>
    <mxCell id="emailInput" value="you@example.com" style="shape=mxgraph.mockup.forms.rrect;rSize=4;fillColor=#FFFFFF;strokeColor=#CCCCCC;fontColor=#AAAAAA;fontSize=13;align=left;spacingLeft=8;whiteSpace=wrap;html=1;" vertex="1" parent="1">
      <mxGeometry x="230" y="112" width="340" height="36" as="geometry"/>
    </mxCell>
    <!-- Password field -->
    <mxCell id="passLabel" value="Password" style="text;html=1;fillColor=none;strokeColor=none;fontColor=#666666;fontSize=12;align=left;" vertex="1" parent="1">
      <mxGeometry x="230" y="164" width="120" height="20" as="geometry"/>
    </mxCell>
    <mxCell id="passInput" value="&#x2022;&#x2022;&#x2022;&#x2022;&#x2022;&#x2022;&#x2022;&#x2022;" style="shape=mxgraph.mockup.forms.rrect;rSize=4;fillColor=#FFFFFF;strokeColor=#CCCCCC;fontColor=#AAAAAA;fontSize=13;align=left;spacingLeft=8;whiteSpace=wrap;html=1;" vertex="1" parent="1">
      <mxGeometry x="230" y="186" width="340" height="36" as="geometry"/>
    </mxCell>
    <!-- Checkbox -->
    <mxCell id="terms" value="I agree to Terms of Service" style="shape=mxgraph.mockup.forms.checkbox;fillColor=#FFFFFF;strokeColor=#CCCCCC;fontColor=#666666;fontSize=12;html=1;align=left;spacingLeft=6;" vertex="1" parent="1">
      <mxGeometry x="230" y="240" width="200" height="20" as="geometry"/>
    </mxCell>
    <!-- Submit button -->
    <mxCell id="submit" value="Create Account" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#333333;strokeColor=#222222;fontColor=#FFFFFF;fontSize=14;fontStyle=1;" vertex="1" parent="1">
      <mxGeometry x="230" y="280" width="340" height="40" as="geometry"/>
    </mxCell>
    <!-- Divider -->
    <mxCell id="divider" value="" style="line;strokeWidth=1;strokeColor=#EEEEEE;html=1;" vertex="1" parent="1">
      <mxGeometry x="230" y="340" width="340" height="1" as="geometry"/>
    </mxCell>
    <!-- Secondary action -->
    <mxCell id="signin" value="Already have an account? &lt;u&gt;Sign in&lt;/u&gt;" style="text;html=1;fillColor=none;strokeColor=none;fontColor=#666666;fontSize=12;align=center;" vertex="1" parent="1">
      <mxGeometry x="300" y="360" width="200" height="24" as="geometry"/>
    </mxCell>
  </root>
</mxGraphModel>

Hi-fi Mockup Patterns

Style Rules

Use brand colors (set via variables or direct hex)
Shadows: shadow=1; on cards and modals
Border radius: rounded=1;arcSize=8; for modern look
Typography: fontSize=14;fontFamily=Inter; with weight hierarchy
Icons: Use mxgraph.mockup.graphics or inline SVG
Real content, real images (use image shapes with URLs)
Consistent spacing grid (8px increments)

Dashboard Example (Hi-fi)

<mxGraphModel>
  <root>
    <mxCell id="0"/>
    <mxCell id="1" parent="0"/>
    <!-- Sidebar -->
    <mxCell id="sidebar" value="" style="rounded=0;fillColor=#1A1A2E;strokeColor=none;" vertex="1" parent="1">
      <mxGeometry x="0" y="0" width="220" height="640" as="geometry"/>
    </mxCell>
    <mxCell id="logo" value="&lt;font color=&quot;#FFFFFF&quot; style=&quot;font-size:18px&quot;&gt;&lt;b&gt;Dashboard&lt;/b&gt;&lt;/font&gt;" style="text;html=1;fillColor=none;strokeColor=none;align=left;spacingLeft=16;" vertex="1" parent="1">
      <mxGeometry x="0" y="16" width="220" height="40" as="geometry"/>
    </mxCell>
    <mxCell id="navItem1" value="&lt;font color=&quot;#FFFFFF&quot;&gt;Overview&lt;/font&gt;" style="rounded=1;fillColor=#16213E;strokeColor=none;html=1;align=left;spacingLeft=40;fontColor=#FFFFFF;fontSize=13;" vertex="1" parent="1">
      <mxGeometry x="12" y="80" width="196" height="36" as="geometry"/>
    </mxCell>
    <mxCell id="navItem2" value="&lt;font color=&quot;#A0A0B0&quot;&gt;Analytics&lt;/font&gt;" style="rounded=1;fillColor=none;strokeColor=none;html=1;align=left;spacingLeft=40;fontSize=13;" vertex="1" parent="1">
      <mxGeometry x="12" y="120" width="196" height="36" as="geometry"/>
    </mxCell>
    <mxCell id="navItem3" value="&lt;font color=&quot;#A0A0B0&quot;&gt;Settings&lt;/font&gt;" style="rounded=1;fillColor=none;strokeColor=none;html=1;align=left;spacingLeft=40;fontSize=13;" vertex="1" parent="1">
      <mxGeometry x="12" y="160" width="196" height="36" as="geometry"/>
    </mxCell>
    <!-- Main content area -->
    <mxCell id="main" value="" style="rounded=0;fillColor=#F8F9FA;strokeColor=none;" vertex="1" parent="1">
      <mxGeometry x="220" y="0" width="780" height="640" as="geometry"/>
    </mxCell>
    <!-- Top bar -->
    <mxCell id="topbar" value="" style="rounded=0;fillColor=#FFFFFF;strokeColor=none;shadow=1;" vertex="1" parent="1">
      <mxGeometry x="220" y="0" width="780" height="56" as="geometry"/>
    </mxCell>
    <mxCell id="pageTitle" value="&lt;b&gt;Overview&lt;/b&gt;" style="text;html=1;fillColor=none;strokeColor=none;fontColor=#1A1A2E;fontSize=18;align=left;spacingLeft=24;" vertex="1" parent="1">
      <mxGeometry x="220" y="12" width="200" height="32" as="geometry"/>
    </mxCell>
    <!-- Metric cards row -->
    <mxCell id="metric1" value="&lt;font color=&quot;#666&quot; style=&quot;font-size:12px&quot;&gt;Total Users&lt;/font&gt;&lt;br&gt;&lt;b style=&quot;font-size:28px;color:#1A1A2E&quot;&gt;12,847&lt;/b&gt;&lt;br&gt;&lt;font color=&quot;#22C55E&quot; style=&quot;font-size:12px&quot;&gt;+12.5%&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#FFFFFF;strokeColor=#E5E7EB;shadow=1;align=left;verticalAlign=top;spacingTop=16;spacingLeft=20;" vertex="1" parent="1">
      <mxGeometry x="248" y="80" width="230" height="110" as="geometry"/>
    </mxCell>
    <mxCell id="metric2" value="&lt;font color=&quot;#666&quot; style=&quot;font-size:12px&quot;&gt;Revenue&lt;/font&gt;&lt;br&gt;&lt;b style=&quot;font-size:28px;color:#1A1A2E&quot;&gt;$48.2K&lt;/b&gt;&lt;br&gt;&lt;font color=&quot;#22C55E&quot; style=&quot;font-size:12px&quot;&gt;+8.1%&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#FFFFFF;strokeColor=#E5E7EB;shadow=1;align=left;verticalAlign=top;spacingTop=16;spacingLeft=20;" vertex="1" parent="1">
      <mxGeometry x="498" y="80" width="230" height="110" as="geometry"/>
    </mxCell>
    <mxCell id="metric3" value="&lt;font color=&quot;#666&quot; style=&quot;font-size:12px&quot;&gt;Conversion&lt;/font&gt;&lt;br&gt;&lt;b style=&quot;font-size:28px;color:#1A1A2E&quot;&gt;3.24%&lt;/b&gt;&lt;br&gt;&lt;font color=&quot;#EF4444&quot; style=&quot;font-size:12px&quot;&gt;-0.8%&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#FFFFFF;strokeColor=#E5E7EB;shadow=1;align=left;verticalAlign=top;spacingTop=16;spacingLeft=20;" vertex="1" parent="1">
      <mxGeometry x="748" y="80" width="230" height="110" as="geometry"/>
    </mxCell>
    <!-- Chart placeholder -->
    <mxCell id="chart" value="&lt;b&gt;Revenue Trend&lt;/b&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#FFFFFF;strokeColor=#E5E7EB;shadow=1;verticalAlign=top;spacingTop=16;spacingLeft=20;align=left;fontSize=14;fontColor=#1A1A2E;" vertex="1" parent="1">
      <mxGeometry x="248" y="216" width="480" height="280" as="geometry"/>
    </mxCell>
    <!-- Table card -->
    <mxCell id="table" value="&lt;b&gt;Recent Activity&lt;/b&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#FFFFFF;strokeColor=#E5E7EB;shadow=1;verticalAlign=top;spacingTop=16;spacingLeft=20;align=left;fontSize=14;fontColor=#1A1A2E;" vertex="1" parent="1">
      <mxGeometry x="248" y="520" width="730" height="100" as="geometry"/>
    </mxCell>
  </root>
</mxGraphModel>

Mobile Screen Templates

iOS Navigation Bar

<mxCell id="iosNav" value="" style="rounded=0;fillColor=#F8F8F8;strokeColor=#C8C8CC;" vertex="1" parent="1">
  <mxGeometry x="0" y="0" width="375" height="44" as="geometry"/>
</mxCell>
<mxCell id="iosTitle" value="&lt;b&gt;Screen Title&lt;/b&gt;" style="text;html=1;fillColor=none;strokeColor=none;fontColor=#000000;fontSize=17;fontFamily=SF Pro Display;align=center;" vertex="1" parent="1">
  <mxGeometry x="100" y="10" width="175" height="24" as="geometry"/>
</mxCell>
<mxCell id="iosBack" value="&lt;font color=&quot;#007AFF&quot;&gt;&amp;lt; Back&lt;/font&gt;" style="text;html=1;fillColor=none;strokeColor=none;fontSize=17;align=left;spacingLeft=8;" vertex="1" parent="1">
  <mxGeometry x="0" y="10" width="80" height="24" as="geometry"/>
</mxCell>

iOS Tab Bar

<mxCell id="tabBar" value="" style="rounded=0;fillColor=#F8F8F8;strokeColor=#C8C8CC;" vertex="1" parent="1">
  <mxGeometry x="0" y="768" width="375" height="49" as="geometry"/>
</mxCell>
<mxCell id="tab1" value="&lt;font style=&quot;font-size:10px&quot;&gt;Home&lt;/font&gt;" style="text;html=1;fillColor=none;strokeColor=none;fontColor=#007AFF;align=center;" vertex="1" parent="1">
  <mxGeometry x="10" y="778" width="65" height="30" as="geometry"/>
</mxCell>
<mxCell id="tab2" value="&lt;font style=&quot;font-size:10px&quot;&gt;Search&lt;/font&gt;" style="text;html=1;fillColor=none;strokeColor=none;fontColor=#8E8E93;align=center;" vertex="1" parent="1">
  <mxGeometry x="85" y="778" width="65" height="30" as="geometry"/>
</mxCell>
<mxCell id="tab3" value="&lt;font style=&quot;font-size:10px&quot;&gt;Profile&lt;/font&gt;" style="text;html=1;fillColor=none;strokeColor=none;fontColor=#8E8E93;align=center;" vertex="1" parent="1">
  <mxGeometry x="160" y="778" width="65" height="30" as="geometry"/>
</mxCell>

Android Material Bottom Navigation

<mxCell id="androidNav" value="" style="rounded=0;fillColor=#FFFFFF;strokeColor=#E0E0E0;shadow=1;" vertex="1" parent="1">
  <mxGeometry x="0" y="752" width="360" height="56" as="geometry"/>
</mxCell>
<mxCell id="anTab1" value="&lt;font color=&quot;#6200EE&quot; style=&quot;font-size:10px&quot;&gt;&lt;b&gt;Home&lt;/b&gt;&lt;/font&gt;" style="text;html=1;fillColor=none;strokeColor=none;align=center;" vertex="1" parent="1">
  <mxGeometry x="20" y="764" width="60" height="32" as="geometry"/>
</mxCell>
<mxCell id="anTab2" value="&lt;font color=&quot;#666&quot; style=&quot;font-size:10px&quot;&gt;Search&lt;/font&gt;" style="text;html=1;fillColor=none;strokeColor=none;align=center;" vertex="1" parent="1">
  <mxGeometry x="100" y="764" width="60" height="32" as="geometry"/>
</mxCell>

Responsive Breakpoints

When designing for multiple screen sizes, create separate pages in the .drawio file:

Breakpoint	Width	Name	Use
Mobile	375px	`mobile`	iPhone SE / standard phones
Tablet	768px	`tablet`	iPad / tablets
Desktop	1280px	`desktop`	Standard laptop/desktop
Wide	1440px	`wide`	Large monitors

Multi-page XML Structure

<mxfile>
  <diagram id="mobile" name="Mobile (375px)">
    <mxGraphModel dx="375" dy="812" grid="1" gridSize="8">
      <root><mxCell id="0"/><mxCell id="1" parent="0"/></root>
    </mxGraphModel>
  </diagram>
  <diagram id="tablet" name="Tablet (768px)">
    <mxGraphModel dx="768" dy="1024" grid="1" gridSize="8">
      <root><mxCell id="0"/><mxCell id="1" parent="0"/></root>
    </mxGraphModel>
  </diagram>
  <diagram id="desktop" name="Desktop (1280px)">
    <mxGraphModel dx="1280" dy="800" grid="1" gridSize="8">
      <root><mxCell id="0"/><mxCell id="1" parent="0"/></root>
    </mxGraphModel>
  </diagram>
</mxfile>

Common UI Components

Data Table

<!-- Table header row -->
<mxCell id="thRow" value="" style="rounded=0;fillColor=#F9FAFB;strokeColor=#E5E7EB;" vertex="1" parent="1">
  <mxGeometry x="0" y="0" width="700" height="40" as="geometry"/>
</mxCell>
<mxCell id="th1" value="&lt;b&gt;Name&lt;/b&gt;" style="text;html=1;fillColor=none;strokeColor=none;fontColor=#6B7280;fontSize=12;align=left;spacingLeft=16;" vertex="1" parent="1">
  <mxGeometry x="0" y="8" width="200" height="24" as="geometry"/>
</mxCell>
<mxCell id="th2" value="&lt;b&gt;Status&lt;/b&gt;" style="text;html=1;fillColor=none;strokeColor=none;fontColor=#6B7280;fontSize=12;align=left;spacingLeft=16;" vertex="1" parent="1">
  <mxGeometry x="200" y="8" width="150" height="24" as="geometry"/>
</mxCell>
<mxCell id="th3" value="&lt;b&gt;Date&lt;/b&gt;" style="text;html=1;fillColor=none;strokeColor=none;fontColor=#6B7280;fontSize=12;align=left;spacingLeft=16;" vertex="1" parent="1">
  <mxGeometry x="350" y="8" width="150" height="24" as="geometry"/>
</mxCell>
<!-- Data row -->
<mxCell id="row1" value="" style="rounded=0;fillColor=#FFFFFF;strokeColor=#E5E7EB;" vertex="1" parent="1">
  <mxGeometry x="0" y="40" width="700" height="44" as="geometry"/>
</mxCell>
<mxCell id="r1c1" value="John Smith" style="text;html=1;fillColor=none;strokeColor=none;fontColor=#111827;fontSize=13;align=left;spacingLeft=16;" vertex="1" parent="1">
  <mxGeometry x="0" y="50" width="200" height="24" as="geometry"/>
</mxCell>
<!-- Status badge -->
<mxCell id="r1c2" value="Active" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#DCFCE7;strokeColor=none;fontColor=#166534;fontSize=11;arcSize=50;" vertex="1" parent="1">
  <mxGeometry x="216" y="52" width="60" height="22" as="geometry"/>
</mxCell>

Modal / Dialog

<!-- Overlay backdrop -->
<mxCell id="overlay" value="" style="rounded=0;fillColor=#000000;opacity=50;strokeColor=none;" vertex="1" parent="1">
  <mxGeometry x="0" y="0" width="1000" height="640" as="geometry"/>
</mxCell>
<!-- Modal -->
<mxCell id="modal" value="" style="rounded=1;fillColor=#FFFFFF;strokeColor=#E5E7EB;shadow=1;arcSize=4;" vertex="1" parent="1">
  <mxGeometry x="300" y="160" width="400" height="280" as="geometry"/>
</mxCell>
<mxCell id="modalTitle" value="&lt;b&gt;Confirm Action&lt;/b&gt;" style="text;html=1;fillColor=none;strokeColor=none;fontColor=#111827;fontSize=16;align=left;spacingLeft=24;" vertex="1" parent="1">
  <mxGeometry x="300" y="176" width="340" height="28" as="geometry"/>
</mxCell>
<mxCell id="modalBody" value="Are you sure you want to proceed? This action cannot be undone." style="text;html=1;fillColor=none;strokeColor=none;fontColor=#6B7280;fontSize=13;align=left;spacingLeft=24;whiteSpace=wrap;" vertex="1" parent="1">
  <mxGeometry x="300" y="216" width="360" height="60" as="geometry"/>
</mxCell>
<!-- Buttons -->
<mxCell id="cancelBtn" value="Cancel" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#FFFFFF;strokeColor=#D1D5DB;fontColor=#374151;fontSize=13;" vertex="1" parent="1">
  <mxGeometry x="480" y="380" width="90" height="36" as="geometry"/>
</mxCell>
<mxCell id="confirmBtn" value="Confirm" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#EF4444;strokeColor=#DC2626;fontColor=#FFFFFF;fontSize=13;fontStyle=1;" vertex="1" parent="1">
  <mxGeometry x="580" y="380" width="90" height="36" as="geometry"/>
</mxCell>

Toast / Notification

<mxCell id="toast" value="&lt;b&gt;Success!&lt;/b&gt; Your changes have been saved." style="rounded=1;whiteSpace=wrap;html=1;fillColor=#DCFCE7;strokeColor=#BBF7D0;fontColor=#166534;fontSize=13;shadow=1;align=left;spacingLeft=40;arcSize=6;" vertex="1" parent="1">
  <mxGeometry x="540" y="20" width="360" height="48" as="geometry"/>
</mxCell>

Wireframe Annotation

Use annotation shapes to communicate design decisions:

<!-- Annotation callout -->
<mxCell id="annotation" value="&lt;font color=&quot;#DC2626&quot;&gt;&lt;b&gt;Note:&lt;/b&gt; This section collapses on mobile&lt;/font&gt;" style="shape=callout;whiteSpace=wrap;html=1;fillColor=#FEF2F2;strokeColor=#FCA5A5;fontSize=11;perimeter=calloutPerimeter;position2=0.5;base=20;size=12;" vertex="1" parent="1">
  <mxGeometry x="500" y="200" width="200" height="60" as="geometry"/>
</mxCell>

Annotation Color Code

Color	Hex	Meaning
Red	`#DC2626`	Critical / must-fix
Orange	`#EA580C`	Question / needs decision
Blue	`#2563EB`	Developer note / implementation detail
Green	`#16A34A`	Approved / signed-off
Purple	`#9333EA`	Accessibility note

Screen Flow Diagrams

Connect wireframe screens to show user navigation:

<!-- Screen 1 thumbnail -->
<mxCell id="screen1" value="&lt;b&gt;Login&lt;/b&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#FFFFFF;strokeColor=#D1D5DB;shadow=1;verticalAlign=bottom;spacingBottom=8;fontSize=12;" vertex="1" parent="1">
  <mxGeometry x="40" y="40" width="160" height="240" as="geometry"/>
</mxCell>
<!-- Screen 2 thumbnail -->
<mxCell id="screen2" value="&lt;b&gt;Dashboard&lt;/b&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#FFFFFF;strokeColor=#D1D5DB;shadow=1;verticalAlign=bottom;spacingBottom=8;fontSize=12;" vertex="1" parent="1">
  <mxGeometry x="320" y="40" width="160" height="240" as="geometry"/>
</mxCell>
<!-- Flow arrow -->
<mxCell id="flow1" value="Login success" style="edgeStyle=orthogonalEdgeStyle;rounded=1;strokeColor=#6B7280;fontColor=#6B7280;fontSize=11;" edge="1" source="screen1" target="screen2" parent="1">
  <mxGeometry relative="1" as="geometry"/>
</mxCell>

Best Practices

Start lo-fi — Validate layout before investing in visual polish
Use 8px grid — Set draw.io grid to 8px (gridSize=8) for consistent spacing
Real content — Use real text and realistic data, not "Lorem ipsum"
Consistent sizing — Buttons: 36-44px height; inputs: 36-40px; touch targets: 44px minimum
Responsive thinking — Design mobile-first, then expand to larger breakpoints
Annotate decisions — Use callouts to document why, not just what
Version screens — Use draw.io pages for iterations (v1, v2, v3)
Export for review — Use .drawio.svg for GitHub PRs, PNG for Slack/email