---
title: "Bootstrap 2 Flowchart"
description: "A flowchart diagram showing process flow and decision points"
category: "templates/layout"
type: "flowchart"
source_file: "templates/layout/bootstrap_2_decoded.xml"
tags: ["ui", "template", "design", "layout", "wireframe", "drawio"]
---

# Bootstrap 2 Flowchart

A flowchart diagram showing process flow and decision points

## 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.5" pageWidth="826" pageHeight="1169" background="none" math="0" shadow="0">
  <root>
    <mxCell id="0" style=";html=1;"/>
    <mxCell id="1" style=";html=1;" parent="0"/>
    <mxCell id="486c442ea1e471-39" value="" style="html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;align=center;rSize=5;strokeColor=#3D8BCD;fillColor=#ffffff;fontColor=#f0f0f0;spacingTop=30;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
      <mxGeometry x="40" y="735" width="830" height="360" as="geometry"/>
    </mxCell>
    <mxCell id="486c442ea1e471-40" value="Panel title" style="html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.topButton;rSize=5;strokeColor=none;fillColor=#3D8BCD;fontColor=#ffffff;fontSize=14;fontStyle=1;align=left;spacingLeft=10;whiteSpace=wrap;resizeWidth=1;" parent="486c442ea1e471-39" vertex="1">
      <mxGeometry width="830" height="30" relative="1" as="geometry"/>
    </mxCell>
    <mxCell id="486c442ea1e471-37" value="" style="html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;align=center;rSize=5;strokeColor=#E0F0D6;fillColor=#ffffff;fontColor=#f0f0f0;spacingTop=30;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
      <mxGeometry x="40" y="160" width="830" height="490" as="geometry"/>
    </mxCell>
    <mxCell id="486c442ea1e471-38" value="Panel title" style="html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.topButton;rSize=5;strokeColor=none;fillColor=#E0F0D6;fontColor=#59B958;fontSize=14;fontStyle=1;align=left;spacingLeft=10;whiteSpace=wrap;resizeWidth=1;" parent="486c442ea1e471-37" vertex="1">
      <mxGeometry width="830" height="30" relative="1" as="geometry"/>
    </mxCell>
    <mxCell id="486c442ea1e471-1" value="" style="html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rect;strokeColor=none;fillColor=#ffffff;rounded=0;fontSize=12;fontColor=#000000;align=center;" parent="1" vertex="1">
      <mxGeometry x="50" y="210" width="800" height="430" as="geometry"/>
    </mxCell>
    <mxCell id="486c442ea1e471-2" value="" style="html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.horLines;strokeColor=#dddddd;fillColor=#fdfdfd;resizeWidth=1;" parent="486c442ea1e471-1" vertex="1">
      <mxGeometry width="800" height="40" relative="1" as="geometry"/>
    </mxCell>
    <mxCell id="486c442ea1e471-3" value="Template Name" style="html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rect;strokeColor=none;fillColor=none;fontSize=14;fontStyle=1;align=left;spacingLeft=10;whiteSpace=wrap;resizeHeight=1;" parent="486c442ea1e471-2" vertex="1">
      <mxGeometry width="200" height="40" relative="1" as="geometry"/>
    </mxCell>
    <mxCell id="486c442ea1e471-4" value="Message" style="html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rect;strokeColor=none;fillColor=none;fontSize=14;fontStyle=1;align=left;spacingLeft=10;whiteSpace=wrap;resizeWidth=1;resizeHeight=1;" parent="486c442ea1e471-2" vertex="1">
      <mxGeometry width="200" height="40" relative="1" as="geometry">
        <mxPoint x="200" as="offset"/>
      </mxGeometry>
    </mxCell>
    <mxCell id="486c442ea1e471-5" value="" style="html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.horLines;strokeColor=#dddddd;fillColor=none;resizeWidth=1;" parent="486c442ea1e471-1" vertex="1">
      <mxGeometry width="800" height="130" relative="1" as="geometry">
        <mxPoint y="40" as="offset"/>
      </mxGeometry>
    </mxCell>
    <mxCell id="486c442ea1e471-6" value="Uncompleted Profile" style="html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rect;strokeColor=none;fillColor=none;align=left;spacingLeft=10;whiteSpace=wrap;" parent="486c442ea1e471-5" vertex="1">
      <mxGeometry width="200" height="40" relative="1" as="geometry"/>
    </mxCell>
    <mxCell id="486c442ea1e471-7" value="Hello! At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium deleniti atque corrupti quos doloreset quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id estlaborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Name libero tempore, cum soluta nobis est eligendioptio cumque nihil impedit quo." style="html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rect;strokeColor=none;fillColor=none;align=left;valign=top;spacingLeft=10;verticalAlign=top;spacingTop=6;whiteSpace=wrap;resizeWidth=1;" parent="486c442ea1e471-5" vertex="1">
      <mxGeometry width="400" height="130" relative="1" as="geometry">
        <mxPoint x="200" as="offset"/>
      </mxGeometry>
    </mxCell>
    <mxCell id="486c442ea1e471-8" value="Edit" style="html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#dddddd;fillColor=#ffffff;whiteSpace=wrap;" parent="486c442ea1e471-5" vertex="1">
      <mxGeometry x="1" width="50" height="30" relative="1" as="geometry">
        <mxPoint x="-140" y="15" as="offset"/>
      </mxGeometry>
    </mxCell>
    <mxCell id="486c442ea1e471-9" value="Delete" style="html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#dddddd;fillColor=#ffffff;whiteSpace=wrap;" parent="486c442ea1e471-5" vertex="1">
      <mxGeometry x="1" width="60" height="30" relative="1" as="geometry">
        <mxPoint x="-80" y="15" as="offset"/>
      </mxGeometry>
    </mxCell>
    <mxCell id="486c442ea1e471-10" value="" style="html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.horLines;strokeColor=#dddddd;fillColor=none;resizeWidth=1;" parent="486c442ea1e471-1" vertex="1">
      <mxGeometry width="800" height="100" relative="1" as="geometry">
        <mxPoint y="170" as="offset"/>
      </mxGeometry>
    </mxCell>
    <mxCell id="486c442ea1e471-11" value="Spam Suspect" style="html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rect;strokeColor=none;fillColor=none;align=left;spacingLeft=10;whiteSpace=wrap;" parent="486c442ea1e471-10" vertex="1">
      <mxGeometry width="200" height="40" relative="1" as="geometry"/>
    </mxCell>
    <mxCell id="486c442ea1e471-12" value="Hello, deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa quiofficia deserunt mollitia animi, id est fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam nobis est eligendi optio cumquenihil impedit quo minus id quod maxime placeat." style="html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rect;strokeColor=none;fillColor=none;align=left;valign=top;spacingLeft=10;verticalAlign=top;spacingTop=6;whiteSpace=wrap;resizeWidth=1;" parent="486c442ea1e471-10" vertex="1">
      <mxGeometry width="400" height="100" relative="1" as="geometry">
        <mxPoint x="200" as="offset"/>
      </mxGeometry>
    </mxCell>
    <mxCell id="486c442ea1e471-13" value="Edit" style="html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#dddddd;fillColor=#ffffff;whiteSpace=wrap;" parent="486c442ea1e471-10" vertex="1">
      <mxGeometry x="1" width="50" height="30" relative="1" as="geometry">
        <mxPoint x="-140" y="15" as="offset"/>
      </mxGeometry>
    </mxCell>
    <mxCell id="486c442ea1e471-14" value="Delete" style="html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#dddddd;fillColor=#ffffff;whiteSpace=wrap;" parent="486c442ea1e471-10" vertex="1">
      <mxGeometry x="1" width="60" height="30" relative="1" as="geometry">
        <mxPoint x="-80" y="15" as="offset"/>
      </mxGeometry>
    </mxCell>
    <mxCell id="486c442ea1e471-15" value="" style="html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.horLines;strokeColor=#dddddd;fillColor=none;resizeWidth=1;" parent="486c442ea1e471-1" vertex="1">
      <mxGeometry width="800" height="160" relative="1" as="geometry">
        <mxPoint y="270" as="offset"/>
      </mxGeometry>
    </mxCell>
    <mxCell id="486c442ea1e471-16" value="Profile Blocked" style="html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rect;strokeColor=none;fillColor=none;align=left;spacingLeft=10;whiteSpace=wrap;" parent="486c442ea1e471-15" vertex="1">
      <mxGeometry width="200" height="40" as="geometry"/>
    </mxCell>
    <mxCell id="486c442ea1e471-17" value="Hello! Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsaquae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sitaspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et doloremagnam aliquam quaerat voluptarem." style="html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rect;strokeColor=none;fillColor=none;align=left;valign=top;spacingLeft=10;verticalAlign=top;spacingTop=6;whiteSpace=wrap;resizeWidth=1;" parent="486c442ea1e471-15" vertex="1">
      <mxGeometry width="400" height="160" relative="1" as="geometry">
        <mxPoint x="200" as="offset"/>
      </mxGeometry>
    </mxCell>
    <mxCell id="486c442ea1e471-18" value="Edit" style="html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#dddddd;fillColor=#ffffff;whiteSpace=wrap;" parent="486c442ea1e471-15" vertex="1">
      <mxGeometry x="1" width="50" height="30" relative="1" as="geometry">
        <mxPoint x="-140" y="15" as="offset"/>
      </mxGeometry>
    </mxCell>
    <mxCell id="486c442ea1e471-19" value="Delete" style="html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#dddddd;fillColor=#ffffff;whiteSpace=wrap;" parent="486c442ea1e471-15" vertex="1">
      <mxGeometry x="1" width="60" height="30" relative="1" as="geometry">
        <mxPoint x="-80" y="15" as="offset"/>
      </mxGeometry>
    </mxCell>
    <mxCell id="486c442ea1e471-20" value="" style="html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.horLines;strokeColor=#dddddd;fillColor=#fdfdfd;rounded=0;fontSize=12;fontColor=#000000;align=center;" parent="1" vertex="1">
      <mxGeometry x="50" y="775" width="800" height="50" as="geometry"/>
    </mxCell>
    <mxCell id="486c442ea1e471-21" value="2 fields selected" style="html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.checkbox;strokeColor=#dddddd;fillColor=none;align=left;labelPosition=right;spacingLeft=10;fontStyle=1;" parent="486c442ea1e471-20" vertex="1">
      <mxGeometry y="0.5" width="14" height="14" relative="1" as="geometry">
        <mxPoint x="13" y="-7" as="offset"/>
      </mxGeometry>
    </mxCell>
    <mxCell id="486c442ea1e471-22" value="Mark as OK" style="html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#dddddd;;fillColor=#ffffff;whiteSpace=wrap;" parent="486c442ea1e471-20" vertex="1">
      <mxGeometry y="0.5" width="90" height="30" relative="1" as="geometry">
        <mxPoint x="150" y="-15" as="offset"/>
      </mxGeometry>
    </mxCell>
    <mxCell id="486c442ea1e471-23" value="Mark as Violation" style="html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#dddddd;;fillColor=#ffffff;whiteSpace=wrap;" parent="486c442ea1e471-20" vertex="1">
      <mxGeometry y="0.5" width="120" height="30" relative="1" as="geometry">
        <mxPoint x="250" y="-15" as="offset"/>
      </mxGeometry>
    </mxCell>
    <mxCell id="486c442ea1e471-24" value="Mark all as OK" style="html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#dddddd;;fillColor=#ffffff;whiteSpace=wrap;" parent="486c442ea1e471-20" vertex="1">
      <mxGeometry x="1" y="0.5" width="100" height="30" relative="1" as="geometry">
        <mxPoint x="-110" y="-15" as="offset"/>
      </mxGeometry>
    </mxCell>
    <mxCell id="486c442ea1e471-25" value="Phone" style="html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rect;strokeColor=none;fillColor=none;fontColor=#999999;align=left;spacingLeft=5;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
      <mxGeometry x="90" y="845" width="100" height="20" as="geometry"/>
    </mxCell>
    <mxCell id="486c442ea1e471-26" value="" style="html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.checkbox;strokeColor=#999999;fillColor=#ffffff;rounded=0;fontSize=12;fontColor=#000000;align=center;" parent="1" vertex="1">
      <mxGeometry x="63" y="878" width="14" height="14" as="geometry"/>
    </mxCell>
    <mxCell id="486c442ea1e471-27" value="+38 (066) 875 67 97" style="html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#999999;fillColor=#ffffff;align=left;fontSize=16;spacingLeft=10;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
      <mxGeometry x="90" y="865" width="640" height="40" as="geometry"/>
    </mxCell>
    <mxCell id="486c442ea1e471-28" value="ok" style="html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;align=center;rSize=3;strokeColor=none;fillColor=#58B957;fontSize=12;fontStyle=1;fontColor=#ffffff;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
      <mxGeometry x="750" y="875" width="30" height="20" as="geometry"/>
    </mxCell>
    <mxCell id="486c442ea1e471-29" value="Business email" style="html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rect;strokeColor=none;fillColor=none;fontColor=#999999;align=left;spacingLeft=5;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
      <mxGeometry x="90" y="915" width="100" height="20" as="geometry"/>
    </mxCell>
    <mxCell id="486c442ea1e471-30" value="" style="html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.checkbox;strokeColor=#999999;fillColor=#ffffff;rounded=0;fontSize=12;fontColor=#000000;align=center;" parent="1" vertex="1">
      <mxGeometry x="63" y="948" width="14" height="14" as="geometry"/>
    </mxCell>
    <mxCell id="486c442ea1e471-31" value="seo@apple.com" style="html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#999999;fillColor=#FDF8E4;align=left;fontSize=16;spacingLeft=10;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
      <mxGeometry x="90" y="935" width="640" height="40" as="geometry"/>
    </mxCell>
    <mxCell id="486c442ea1e471-32" value="To Moderate" style="html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;align=center;rSize=3;strokeColor=none;fillColor=#EFAC43;fontSize=12;fontStyle=1;fontColor=#ffffff;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
      <mxGeometry x="750" y="945" width="90" height="20" as="geometry"/>
    </mxCell>
    <mxCell id="486c442ea1e471-33" value="Skype" style="html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rect;strokeColor=none;fillColor=none;fontColor=#999999;align=left;spacingLeft=5;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
      <mxGeometry x="90" y="985" width="100" height="20" as="geometry"/>
    </mxCell>
    <mxCell id="486c442ea1e471-34" value="" style="html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=3;strokeColor=#999999;fillColor=#ffffff;rounded=0;fontSize=12;fontColor=#000000;align=center;" parent="1" vertex="1">
      <mxGeometry x="63" y="1018" width="14" height="14" as="geometry"/>
    </mxCell>
    <mxCell id="486c442ea1e471-35" value="alex.robby" style="html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#999999;fillColor=#ffffff;align=left;fontSize=16;spacingLeft=10;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
      <mxGeometry x="90" y="1005" width="640" height="40" as="geometry"/>
    </mxCell>
    <mxCell id="486c442ea1e471-36" value="ok" style="html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=3;align=center;strokeColor=none;fillColor=#58B957;fontSize=12;fontStyle=1;fontColor=#ffffff;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
      <mxGeometry x="750" y="1015" width="30" height="20" as="geometry"/>
    </mxCell>
    <mxCell id="486c442ea1e471-41" value="" style="html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=none;fillColor=#f6f6f6;whiteSpace=wrap;rounded=0;fontSize=12;fontColor=#000000;align=center;" parent="1" vertex="1">
      <mxGeometry x="55" y="1125" width="800" height="20" as="geometry"/>
    </mxCell>
    <mxCell id="486c442ea1e471-42" value="" style="html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.leftButton;rSize=5;strokeColor=none;fillColor=#DB524C;whiteSpace=wrap;" parent="486c442ea1e471-41" vertex="1">
      <mxGeometry width="150" height="20" as="geometry"/>
    </mxCell>
    <mxCell id="486c442ea1e471-43" value="" style="rect;strokeColor=none;fillColor=#F2AE43;html=1;whiteSpace=wrap;" parent="486c442ea1e471-41" vertex="1">
      <mxGeometry x="150" width="200" height="20" as="geometry"/>
    </mxCell>
    <mxCell id="486c442ea1e471-44" value="" style="rect;strokeColor=none;fillColor=#59B958;html=1;whiteSpace=wrap;" parent="486c442ea1e471-41" vertex="1">
      <mxGeometry x="350" width="50" height="20" as="geometry"/>
    </mxCell>
    <mxCell id="486c442ea1e471-45" value="" style="rect;strokeColor=none;fillColor=#55C0E0;html=1;whiteSpace=wrap;" parent="486c442ea1e471-41" vertex="1">
      <mxGeometry x="400" width="150" height="20" as="geometry"/>
    </mxCell>
    <mxCell id="486c442ea1e471-46" value="" style="html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;fillColor=#ffffff;strokeColor=#dddddd;whiteSpace=wrap;rounded=0;fontSize=12;fontColor=#000000;align=center;" parent="1" vertex="1">
      <mxGeometry x="275" y="680" width="330" height="30" as="geometry"/>
    </mxCell>
    <mxCell id="486c442ea1e471-47" value="&lt;&lt;" style="html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.leftButton;strokeColor=none;fillColor=none;fontColor=#3D8BCD;whiteSpace=wrap;" parent="486c442ea1e471-46" vertex="1">
      <mxGeometry width="30" height="30" as="geometry"/>
    </mxCell>
    <mxCell id="486c442ea1e471-48" value="1" style="html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rect;strokeColor=#dddddd;fillColor=none;perimeter=none;fontColor=#3D8BCD;whiteSpace=wrap;" parent="486c442ea1e471-46" vertex="1">
      <mxGeometry x="30" width="30" height="30" as="geometry"/>
    </mxCell>
    <mxCell id="486c442ea1e471-49" value="3" style="html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rect;strokeColor=#dddddd;fillColor=none;perimeter=none;fontColor=#3D8BCD;whiteSpace=wrap;" parent="486c442ea1e471-46" vertex="1">
      <mxGeometry x="90" width="30" height="30" as="geometry"/>
    </mxCell>
    <mxCell id="486c442ea1e471-50" value="4" style="html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rect;strokeColor=#dddddd;fillColor=none;perimeter=none;fontColor=#3D8BCD;whiteSpace=wrap;" parent="486c442ea1e471-46" vertex="1">
      <mxGeometry x="120" width="30" height="30" as="geometry"/>
    </mxCell>
    <mxCell id="486c442ea1e471-51" value="5" style="html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rect;strokeColor=#dddddd;fillColor=none;perimeter=none;fontColor=#3D8BCD;whiteSpace=wrap;" parent="486c442ea1e471-46" vertex="1">
      <mxGeometry x="150" width="30" height="30" as="geometry"/>
    </mxCell>
    <mxCell id="486c442ea1e471-52" value="6" style="html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rect;strokeColor=#dddddd;fillColor=none;perimeter=none;fontColor=#3D8BCD;whiteSpace=wrap;" parent="486c442ea1e471-46" vertex="1">
      <mxGeometry x="180" width="30" height="30" as="geometry"/>
    </mxCell>
    <mxCell id="486c442ea1e471-53" value="7" style="html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rect;strokeColor=#dddddd;fillColor=none;perimeter=none;fontColor=#3D8BCD;whiteSpace=wrap;" parent="486c442ea1e471-46" vertex="1">
      <mxGeometry x="210" width="30" height="30" as="geometry"/>
    </mxCell>
    <mxCell id="486c442ea1e471-54" value="8" style="html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rect;strokeColor=#dddddd;fillColor=none;perimeter=none;fontColor=#3D8BCD;whiteSpace=wrap;" parent="486c442ea1e471-46" vertex="1">
      <mxGeometry x="240" width="30" height="30" as="geometry"/>
    </mxCell>
    <mxCell id="486c442ea1e471-55" value="9" style="html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rect;strokeColor=#dddddd;fillColor=none;perimeter=none;fontColor=#3D8BCD;whiteSpace=wrap;" parent="486c442ea1e471-46" vertex="1">
      <mxGeometry x="270" width="30" height="30" as="geometry"/>
    </mxCell>
    <mxCell id="486c442ea1e471-56" value="&gt;&gt;" style="html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rightButton;strokeColor=#dddddd;fillColor=none;fontColor=#3D8BCD;whiteSpace=wrap;" parent="486c442ea1e471-46" vertex="1">
      <mxGeometry x="300" width="30" height="30" as="geometry"/>
    </mxCell>
    <mxCell id="486c442ea1e471-57" value="2" style="html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rect;strokeColor=#3D8BCD;fillColor=#3D8BCD;perimeter=none;fontColor=#ffffff;whiteSpace=wrap;" parent="486c442ea1e471-46" vertex="1">
      <mxGeometry x="60" width="30" height="30" as="geometry"/>
    </mxCell>
    <mxCell id="486c442ea1e471-58" value="" style="html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;fillColor=#f6f6f6;strokeColor=#dddddd;recursiveResize=0;rounded=0;fontSize=12;fontColor=#000000;align=center;" parent="1" vertex="1">
      <mxGeometry x="40" y="45" width="830" height="100" as="geometry"/>
    </mxCell>
    <mxCell id="486c442ea1e471-59" value="Brand" style="html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rect;strokeColor=none;fillColor=none;fontColor=#999999;fontSize=14;whiteSpace=wrap;" parent="486c442ea1e471-58" vertex="1">
      <mxGeometry width="80" height="40" as="geometry"/>
    </mxCell>
    <mxCell id="486c442ea1e471-60" value="Link" style="html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rect;fillColor=#dddddd;strokeColor=none;fontColor=#999999;whiteSpace=wrap;" parent="486c442ea1e471-58" vertex="1">
      <mxGeometry x="80" width="60" height="40" as="geometry"/>
    </mxCell>
    <mxCell id="486c442ea1e471-61" value="Link" style="html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rect;strokeColor=none;fillColor=none;fontColor=#999999;whiteSpace=wrap;" parent="486c442ea1e471-58" vertex="1">
      <mxGeometry x="140" width="60" height="40" as="geometry"/>
    </mxCell>
    <mxCell id="486c442ea1e471-62" value="Dropdown" style="html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rect;strokeColor=none;fillColor=none;fontColor=#999999;spacingRight=10;whiteSpace=wrap;" parent="486c442ea1e471-58" vertex="1">
      <mxGeometry x="200" width="100" height="40" as="geometry"/>
    </mxCell>
    <mxCell id="486c442ea1e471-63" value="" style="shape=triangle;fillColor=#999999;strokeColor=none;direction=south;perimeter=none;" parent="486c442ea1e471-62" vertex="1">
      <mxGeometry x="1" y="0.5" width="8" height="5" relative="1" as="geometry">
        <mxPoint x="-19" y="-3" as="offset"/>
      </mxGeometry>
    </mxCell>
    <mxCell id="486c442ea1e471-64" value="Search..." style="html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#dddddd;fontColor=#dddddd;align=left;spacingLeft=10;whiteSpace=wrap;" parent="486c442ea1e471-58" vertex="1">
      <mxGeometry x="305" y="5" width="200" height="30" as="geometry"/>
    </mxCell>
    <mxCell id="486c442ea1e471-65" value="Submit" style="html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#dddddd;whiteSpace=wrap;" parent="486c442ea1e471-58" vertex="1">
      <mxGeometry x="510" y="5" width="80" height="30" as="geometry"/>
    </mxCell>
    <mxCell id="486c442ea1e471-66" value="Link" style="html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.anchor;fontColor=#999999;whiteSpace=wrap;" parent="486c442ea1e471-58" vertex="1">
      <mxGeometry x="1" y="1" width="60" height="40" relative="1" as="geometry">
        <mxPoint x="-180" y="-40" as="offset"/>
      </mxGeometry>
    </mxCell>
    <mxCell id="486c442ea1e471-67" value="Dropdown" style="html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.anchor;fontColor=#999999;spacingRight=10;whiteSpace=wrap;" parent="486c442ea1e471-58" vertex="1">
      <mxGeometry x="1" y="1" width="100" height="40" relative="1" as="geometry">
        <mxPoint x="-120" y="-40" as="offset"/>
      </mxGeometry>
    </mxCell>
    <mxCell id="486c442ea1e471-68" value="" style="shape=triangle;fillColor=#999999;strokeColor=none;direction=south;perimeter=none;" parent="486c442ea1e471-67" vertex="1">
      <mxGeometry x="1" y="0.5" width="8" height="5" relative="1" as="geometry">
        <mxPoint x="-19" y="-3" as="offset"/>
      </mxGeometry>
    </mxCell>
  </root>
</mxGraphModel>

```