---
title: "Drawio Why Diagram Flowchart"
description: "A flowchart diagram showing process flow and decision points"
category: "blog"
type: "flowchart"
source_file: "blog/drawio-why-diagram_decoded.xml"
tags: ["logic", "blog", "article", "venn", "drawio"]
---

# Drawio Why Diagram Flowchart

A flowchart diagram showing process flow and decision points

## XML Source

```xml
<?xml version="1.0" ?>
<mxGraphModel dx="1076" dy="1788" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="0" pageScale="1" pageWidth="826" pageHeight="1169" background="#ffffff" math="0" shadow="0">
  <root>
    <mxCell id="0"/>
    <mxCell id="1" parent="0"/>
    <mxCell id="24" value="" style="rounded=0;whiteSpace=wrap;html=1;strokeColor=none;strokeWidth=2;fillColor=#CEDBE1;fontSize=24;fontColor=#2F5B7C;opacity=30;" parent="1" vertex="1">
      <mxGeometry x="90" y="-1030" width="900" height="400" as="geometry"/>
    </mxCell>
    <mxCell id="25" value="" style="rounded=0;whiteSpace=wrap;html=1;strokeColor=none;strokeWidth=2;fillColor=#C87104;fontSize=24;fontColor=#333333;" parent="1" vertex="1">
      <mxGeometry x="252" y="-876" width="130" height="24" as="geometry"/>
    </mxCell>
    <mxCell id="26" value="" style="rounded=0;whiteSpace=wrap;html=1;strokeColor=none;strokeWidth=2;fillColor=#1280B0;fontSize=24;fontColor=#333333;" parent="1" vertex="1">
      <mxGeometry x="303" y="-756" width="182" height="24" as="geometry"/>
    </mxCell>
    <mxCell id="27" value="" style="rounded=0;whiteSpace=wrap;html=1;strokeColor=none;strokeWidth=2;fillColor=#605A8C;fontSize=24;fontColor=#333333;" parent="1" vertex="1">
      <mxGeometry x="682" y="-755" width="180" height="24" as="geometry"/>
    </mxCell>
    <mxCell id="28" value="" style="rounded=0;whiteSpace=wrap;html=1;strokeColor=none;strokeWidth=2;fillColor=#C14837;fontSize=24;fontColor=#333333;" parent="1" vertex="1">
      <mxGeometry x="468" y="-980" width="164" height="24" as="geometry"/>
    </mxCell>
    <mxCell id="29" value="" style="rounded=0;whiteSpace=wrap;html=1;strokeColor=none;strokeWidth=2;fillColor=#7BAC36;fontSize=24;fontColor=#333333;" parent="1" vertex="1">
      <mxGeometry x="573" y="-876" width="194" height="24" as="geometry"/>
    </mxCell>
    <mxCell id="30" value="&lt;font color=&quot;#ffffff&quot;&gt;&lt;span&gt;&lt;b&gt;Remember well&lt;/b&gt;&lt;/span&gt;&lt;/font&gt;&lt;br&gt;&lt;font&gt;&lt;font size=&quot;1&quot;&gt;&lt;br&gt;Diagrams are easier to remember - give your overworked and tired brain a rest, study and remember any type of information in a diagram!&lt;/font&gt;&lt;br&gt;&lt;/font&gt;" style="rounded=1;strokeColor=none;fillColor=none;align=right;arcSize=0;verticalAlign=top;whiteSpace=wrap;html=1;fontSize=12;spacing=10;shadow=0;fontColor=#C87104;spacingLeft=0;spacingRight=70;" parent="1" vertex="1">
      <mxGeometry x="123" y="-885" width="312" height="95" as="geometry"/>
    </mxCell>
    <mxCell id="31" value="&lt;font&gt;&lt;font color=&quot;#ffffff&quot;&gt;&lt;span&gt;&lt;b&gt;Make it easy to translate&lt;/b&gt;&lt;/span&gt;&lt;/font&gt;&lt;br&gt;&lt;font&gt;&lt;br&gt;&lt;font size=&quot;1&quot;&gt;The world is getting smaller, but the number of languages aren't shrinking. Reduce&amp;nbsp;translation costs and document in clear diagrams.&lt;/font&gt;&lt;/font&gt;&lt;/font&gt;" style="rounded=1;strokeColor=none;fillColor=none;align=right;arcSize=0;verticalAlign=top;whiteSpace=wrap;html=1;fontSize=12;spacing=10;shadow=0;spacingLeft=0;fontColor=#1280B0;spacingRight=70;" parent="1" vertex="1">
      <mxGeometry x="203" y="-765" width="337" height="95" as="geometry"/>
    </mxCell>
    <mxCell id="32" value="&lt;font&gt;&lt;font color=&quot;#ffffff&quot;&gt;&lt;span&gt;&lt;b&gt;Avoid misunderstandings&lt;/b&gt;&lt;/span&gt;&lt;/font&gt;&lt;br&gt;&lt;font size=&quot;1&quot;&gt;&lt;br&gt;Make sure you are on the same page with the reader by using clear diagrams to communicate.&lt;/font&gt;&lt;br&gt;&lt;/font&gt;" style="rounded=1;strokeColor=none;fillColor=none;align=left;arcSize=0;verticalAlign=top;whiteSpace=wrap;html=1;fontSize=12;spacing=10;shadow=0;fontColor=#605A8C;spacingLeft=70;" parent="1" vertex="1">
      <mxGeometry x="625" y="-765" width="330" height="95" as="geometry"/>
    </mxCell>
    <mxCell id="33" value="&lt;font style=&quot;font-size: 10px&quot;&gt;&lt;font style=&quot;font-size: 12px&quot; color=&quot;#ffffff&quot;&gt;&lt;b&gt;Delight your customers&lt;/b&gt;&lt;/font&gt;&lt;font size=&quot;1&quot;&gt;&lt;font color=&quot;#ffffff&quot;&gt;&lt;br&gt;&lt;/font&gt;&lt;br&gt;Everyone loves diagrams and images. Save their time and give them a diagram instead of dense walls of text!&lt;br&gt;&lt;/font&gt;&lt;/font&gt;" style="rounded=1;strokeColor=none;fillColor=none;align=left;arcSize=0;verticalAlign=top;whiteSpace=wrap;html=1;fontSize=12;spacing=10;shadow=0;fontColor=#C87104;spacingLeft=70;" parent="1" vertex="1">
      <mxGeometry x="415" y="-990" width="323" height="85" as="geometry"/>
    </mxCell>
    <mxCell id="34" value="&lt;font&gt;&lt;font color=&quot;#ffffff&quot;&gt;&lt;b style=&quot;font-size: 12px&quot;&gt;Collaborate more &lt;/b&gt;&lt;span style=&quot;font-size: 12px&quot;&gt;&lt;b&gt;efficiently&lt;/b&gt;&lt;/span&gt;&lt;b style=&quot;font-size: 12px&quot;&gt;&amp;nbsp;&lt;/b&gt;&lt;/font&gt;&lt;span style=&quot;font-size: 10px&quot;&gt;&lt;font color=&quot;#ffffff&quot;&gt;&lt;br&gt;&lt;/font&gt;&lt;br&gt;Diagrams always make collaboration easier - UML, mockups, processes, infographics, Venn diagrams, infrastructure, find all these and more in draw.io.&lt;/span&gt;&lt;br&gt;&lt;/font&gt;" style="rounded=1;strokeColor=none;fillColor=none;align=left;arcSize=0;verticalAlign=top;whiteSpace=wrap;html=1;fontSize=12;spacing=10;shadow=0;fontColor=#7BAC36;spacingLeft=70;" parent="1" vertex="1">
      <mxGeometry x="520" y="-885" width="319" height="85" as="geometry"/>
    </mxCell>
    <mxCell id="35" value="" style="verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.partConcEllipse;startAngle=0.75;endAngle=0.5;arcWidth=0.25;fillColor=#e85642;strokeColor=none;shadow=0;fontFamily=Courier New;fontSize=11;fontColor=#000000;align=center;" parent="1" vertex="1">
      <mxGeometry x="365" y="-1000" width="120" height="120" as="geometry"/>
    </mxCell>
    <mxCell id="36" value="" style="verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.partConcEllipse;startAngle=0.25;endAngle=0;arcWidth=0.25;fillColor=#f08705;strokeColor=none;shadow=0;fontFamily=Courier New;fontSize=11;fontColor=#000000;align=center;" parent="1" vertex="1">
      <mxGeometry x="365" y="-895" width="120" height="120" as="geometry"/>
    </mxCell>
    <mxCell id="37" value="" style="verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.partConcEllipse;startAngle=0.75;endAngle=0.5;arcWidth=0.25;fillColor=#94CE41;strokeColor=none;shadow=0;fontFamily=Courier New;fontSize=11;fontColor=#000000;align=center;" parent="1" vertex="1">
      <mxGeometry x="470" y="-895" width="120" height="120" as="geometry"/>
    </mxCell>
    <mxCell id="38" value="" style="verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.partConcEllipse;startAngle=0.25;endAngle=0;arcWidth=0.25;fillColor=#1699d3;strokeColor=none;shadow=0;fontFamily=Courier New;fontSize=11;fontColor=#000000;align=center;" parent="1" vertex="1">
      <mxGeometry x="470" y="-790" width="120" height="120" as="geometry"/>
    </mxCell>
    <mxCell id="39" value="" style="verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.partConcEllipse;startAngle=0.75;endAngle=0.5;arcWidth=0.25;fillColor=#736ca8;strokeColor=none;shadow=0;fontFamily=Courier New;fontSize=11;fontColor=#000000;align=center;" parent="1" vertex="1">
      <mxGeometry x="575" y="-790" width="120" height="120" as="geometry"/>
    </mxCell>
    <mxCell id="40" value="1" style="shape=ellipse;strokeWidth=6;fillColor=#ffffff;strokeColor=#E85642;fontSize=22;html=1;fontStyle=1;fontColor=#E85642;shadow=0;align=center;" parent="1" vertex="1">
      <mxGeometry x="400" y="-965" width="50" height="50" as="geometry"/>
    </mxCell>
    <mxCell id="41" value="2" style="shape=ellipse;strokeWidth=6;fillColor=#ffffff;strokeColor=#F08705;fontSize=22;html=1;fontStyle=1;fontColor=#F08705;shadow=0;align=center;" parent="1" vertex="1">
      <mxGeometry x="400" y="-860" width="50" height="50" as="geometry"/>
    </mxCell>
    <mxCell id="42" value="3" style="shape=ellipse;strokeWidth=6;fillColor=#ffffff;strokeColor=#94CE41;fontSize=22;html=1;fontStyle=1;fontColor=#94CE41;shadow=0;align=center;" parent="1" vertex="1">
      <mxGeometry x="505" y="-860" width="50" height="50" as="geometry"/>
    </mxCell>
    <mxCell id="43" value="4" style="shape=ellipse;strokeWidth=6;fillColor=#ffffff;strokeColor=#1699D3;fontSize=22;html=1;fontStyle=1;fontColor=#1699D3;shadow=0;align=center;" parent="1" vertex="1">
      <mxGeometry x="505" y="-755" width="50" height="50" as="geometry"/>
    </mxCell>
    <mxCell id="44" value="5" style="shape=ellipse;strokeWidth=6;fillColor=#ffffff;strokeColor=#736CA8;fontSize=22;html=1;fontStyle=1;fontColor=#736CA8;shadow=0;align=center;" parent="1" vertex="1">
      <mxGeometry x="610" y="-755" width="50" height="50" as="geometry"/>
    </mxCell>
    <mxCell id="45" value="&lt;span style=&quot;font-size: 24px&quot;&gt;Why diagram?&lt;/span&gt;" style="html=1;shape=mxgraph.infographic.bannerSingleFold;dx=33.82;dx2=27;dy=16.94;notch=0;fillColor=#2f5b7c;strokeColor=none;align=center;verticalAlign=middle;fontColor=#FFFFFF;fontSize=24;fontStyle=1;spacingBottom=15;spacingLeft=25;fontFamily=Helvetica;strokeWidth=2;flipH=1;spacingTop=0;" parent="1" vertex="1">
      <mxGeometry x="89" y="-990" width="250" height="85" as="geometry"/>
    </mxCell>
  </root>
</mxGraphModel>

```