ไฟล์ DRAWIO คืออะไร??

ไฟล์ที่มีนามสกุล .drawio คือไฟล์รูปวาดที่สร้างด้วย draw.io ของ diagrams.net ซึ่งเป็นโปรแกรมโอเพ่นซอร์สสำหรับการทำงานกับไดอะแกรม ประกอบด้วยข้อมูลโดยรวมสำหรับเนื้อหาและการจัดรูปแบบขององค์ประกอบไดอะแกรม เช่น ข้อความ รูปภาพ เค้าโครง รูปร่าง และการวางตำแหน่ง ไดอะแกรมที่รองรับโดย DRAWIO ได้แก่ ผังงาน แผนผังองค์กร แผนที่ องค์ประกอบทางวิศวกรรม ไดอะแกรมกระบวนการ แผนภูมิ และอื่นๆ ไฟล์ DRAWIO สามารถส่งออกเป็นรูปแบบต่างๆ ได้หลากหลาย เช่น JPG, PNG, BMP, XML, PDF, HTML และ VSDX

รูปแบบไฟล์ DRAWIO

ไฟล์ DRAWIO เป็นไฟล์ภาพเวกเตอร์ที่จัดเก็บไว้ในรูปแบบไฟล์ XML มาตรฐาน พัฒนาโดย Diagrams.net มีความสามารถในการจัดเก็บข้อมูลไดอะแกรมที่คล้ายกับ Microsoft Visio DrawIO มีให้บริการในรูปแบบ แอปออนไลน์ เพื่อสร้าง เปิด และส่งออกไดอะแกรมเป็นรูปแบบต่างๆ แอปนี้ใช้ไลบรารีการสร้างไดอะแกรม mxGraph ที่ให้บริการกราฟเชิงโต้ตอบและแอปพลิเคชันแผนภูมิที่ทำงานในเบราว์เซอร์หลัก ๆ เช่น Chrome, Firefox, Edge และ Safari

ตัวอย่าง DRAWIO

ตัวอย่างต่อไปนี้เป็นผังงานอย่างง่ายที่สร้างด้วยแอป DRAWIO

รูปแบบไฟล์ DRAWIO

XML เอาต์พุตที่สร้างด้วยการส่งออกมีดังต่อไปนี้

<?xml version="1.0" encoding="UTF-8"?>
<mxfile host="app.diagrams.net" modified="2021-05-17T17:18:48.774Z" agent="5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.93 Safari/537.36" etag="jyk4LjRpkp5MiVdB0UgM" version="14.6.13" type="device">
  <diagram name="Page-1" id="74e2e168-ea6b-b213-b513-2b3c1d86103e">
    <mxGraphModel dx="946" dy="469" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1100" pageHeight="850" background="#ffffff" math="0" shadow="0">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />
        <mxCell id="IQM8xkm7UoOLgGwT3--F-3" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="1" source="IQM8xkm7UoOLgGwT3--F-1" target="IQM8xkm7UoOLgGwT3--F-2">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="IQM8xkm7UoOLgGwT3--F-1" value="Jogging Start" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
          <mxGeometry x="440" y="240" width="120" height="60" as="geometry" />
        </mxCell>
        <mxCell id="IQM8xkm7UoOLgGwT3--F-5" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="1" source="IQM8xkm7UoOLgGwT3--F-2" target="IQM8xkm7UoOLgGwT3--F-4">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="IQM8xkm7UoOLgGwT3--F-7" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="1" source="IQM8xkm7UoOLgGwT3--F-2" target="IQM8xkm7UoOLgGwT3--F-6">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="IQM8xkm7UoOLgGwT3--F-2" value="Should Run?" style="rhombus;whiteSpace=wrap;html=1;" vertex="1" parent="1">
          <mxGeometry x="460" y="340" width="80" height="80" as="geometry" />
        </mxCell>
        <mxCell id="IQM8xkm7UoOLgGwT3--F-4" value="Process End" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
          <mxGeometry x="610" y="350" width="120" height="60" as="geometry" />
        </mxCell>
        <mxCell id="IQM8xkm7UoOLgGwT3--F-9" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="1" source="IQM8xkm7UoOLgGwT3--F-6" target="IQM8xkm7UoOLgGwT3--F-8">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="IQM8xkm7UoOLgGwT3--F-6" value="Run 10 KM" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
          <mxGeometry x="440" y="460" width="120" height="60" as="geometry" />
        </mxCell>
        <mxCell id="IQM8xkm7UoOLgGwT3--F-8" value="End Run" style="whiteSpace=wrap;html=1;rounded=0;" vertex="1" parent="1">
          <mxGeometry x="440" y="600" width="120" height="60" as="geometry" />
        </mxCell>
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

อ้างอิง

See Also