---
title: "Wireframe 3 Diagram"
description: "A diagram diagram template"
category: "templates/layout"
type: "diagram"
source_file: "templates/layout/wireframe_3_decoded.xml"
tags: ["ui", "template", "design", "layout", "wireframe", "drawio"]
---

# Wireframe 3 Diagram

A diagram diagram template

## XML Source

```xml
<?xml version="1.0" ?>
<mxGraphModel dx="1408" dy="544" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1100" pageHeight="850" background="none" math="0" shadow="0">
  <root>
    <mxCell id="0"/>
    <mxCell id="1" parent="0"/>
    <mxCell id="36dcff92a33de48b-1" value="LOGO" style="verticalLabelPosition=middle;shadow=0;dashed=0;align=center;html=1;verticalAlign=middle;strokeWidth=1;shape=mxgraph.mockup.graphics.simpleIcon;strokeColor=#999999;fillColor=#ffffff;rounded=0;comic=1;labelBackgroundColor=none;fontFamily=Verdana;fontSize=24;fontColor=#000000;labelPosition=center;" parent="1" vertex="1">
      <mxGeometry x="40" y="40" width="400" height="130" as="geometry"/>
    </mxCell>
    <mxCell id="36dcff92a33de48b-2" value="" style="verticalLabelPosition=bottom;shadow=0;dashed=0;align=center;html=1;verticalAlign=top;strokeWidth=1;shape=mxgraph.mockup.graphics.simpleIcon;strokeColor=#999999;fillColor=#ffffff;rounded=0;comic=1;labelBackgroundColor=none;fontFamily=Verdana;fontSize=14;fontColor=#000000;" parent="1" vertex="1">
      <mxGeometry x="40" y="230" width="400" height="260" as="geometry"/>
    </mxCell>
    <mxCell id="36dcff92a33de48b-10" value="Header" style="whiteSpace=wrap;html=1;rounded=0;shadow=0;comic=1;labelBackgroundColor=none;strokeColor=#000000;strokeWidth=1;fillColor=none;fontFamily=Verdana;fontSize=14;fontColor=#000000;align=center;" parent="1" vertex="1">
      <mxGeometry x="450" y="40" width="610" height="130" as="geometry"/>
    </mxCell>
    <mxCell id="36dcff92a33de48b-11" value="Navigation" style="whiteSpace=wrap;html=1;rounded=0;shadow=0;comic=1;labelBackgroundColor=none;strokeColor=#000000;strokeWidth=1;fillColor=none;fontFamily=Verdana;fontSize=14;fontColor=#000000;align=center;" parent="1" vertex="1">
      <mxGeometry x="40" y="180" width="1020" height="40" as="geometry"/>
    </mxCell>
    <mxCell id="36dcff92a33de48b-12" value="Area 1" style="whiteSpace=wrap;html=1;rounded=0;shadow=0;comic=1;labelBackgroundColor=none;strokeColor=#000000;strokeWidth=1;fillColor=none;fontFamily=Verdana;fontSize=14;fontColor=#000000;align=center;" parent="1" vertex="1">
      <mxGeometry x="450" y="230" width="610" height="260" as="geometry"/>
    </mxCell>
    <mxCell id="36dcff92a33de48b-13" value="Area 2" style="whiteSpace=wrap;html=1;rounded=0;shadow=0;comic=1;labelBackgroundColor=none;strokeColor=#000000;strokeWidth=1;fillColor=none;fontFamily=Verdana;fontSize=14;fontColor=#000000;align=center;" parent="1" vertex="1">
      <mxGeometry x="40" y="500" width="330" height="270" as="geometry"/>
    </mxCell>
    <mxCell id="36dcff92a33de48b-14" value="Area 4" style="whiteSpace=wrap;html=1;rounded=0;shadow=0;comic=1;labelBackgroundColor=none;strokeColor=#000000;strokeWidth=1;fillColor=none;fontFamily=Verdana;fontSize=14;fontColor=#000000;align=center;" parent="1" vertex="1">
      <mxGeometry x="730" y="500" width="330" height="270" as="geometry"/>
    </mxCell>
    <mxCell id="36dcff92a33de48b-15" value="Area 3" style="whiteSpace=wrap;html=1;rounded=0;shadow=0;comic=1;labelBackgroundColor=none;strokeColor=#000000;strokeWidth=1;fillColor=none;fontFamily=Verdana;fontSize=14;fontColor=#000000;align=center;" parent="1" vertex="1">
      <mxGeometry x="380" y="500" width="340" height="270" as="geometry"/>
    </mxCell>
    <mxCell id="36dcff92a33de48b-16" value="Footer" style="whiteSpace=wrap;html=1;rounded=0;shadow=0;comic=1;labelBackgroundColor=none;strokeColor=#000000;strokeWidth=1;fillColor=none;fontFamily=Verdana;fontSize=14;fontColor=#000000;align=center;" parent="1" vertex="1">
      <mxGeometry x="40" y="780" width="1020" height="50" as="geometry"/>
    </mxCell>
  </root>
</mxGraphModel>

```