ไฟล์ DRAWIO คืออะไร??
ไฟล์ที่มีนามสกุล .drawio คือไฟล์รูปวาดที่สร้างด้วย draw.io ของ diagrams.net ซึ่งเป็นโปรแกรมโอเพ่นซอร์สสำหรับการทำงานกับไดอะแกรม ประกอบด้วยข้อมูลโดยรวมสำหรับเนื้อหาและการจัดรูปแบบขององค์ประกอบไดอะแกรม เช่น ข้อความ รูปภาพ เค้าโครง รูปร่าง และการวางตำแหน่ง ไดอะแกรมที่รองรับโดย DRAWIO ได้แก่ ผังงาน แผนผังองค์กร แผนที่ องค์ประกอบทางวิศวกรรม ไดอะแกรมกระบวนการ แผนภูมิ และอื่นๆ ไฟล์ DRAWIO สามารถส่งออกเป็นรูปแบบต่างๆ ได้หลากหลาย เช่น JPG, PNG, BMP, [XML](/th/web /xml/), PDF, HTML และ VSDX
รูปแบบไฟล์ DRAWIO
ไฟล์ DRAWIO เป็นไฟล์ภาพเวกเตอร์ที่จัดเก็บไว้ในรูปแบบไฟล์ XML มาตรฐาน พัฒนาโดย Diagrams.net มีความสามารถในการจัดเก็บข้อมูลไดอะแกรมที่คล้ายกับ Microsoft Visio DrawIO มีให้บริการในรูปแบบ แอปออนไลน์ เพื่อสร้าง เปิด และส่งออกไดอะแกรมเป็นรูปแบบต่างๆ แอปนี้ใช้ไลบรารีการสร้างไดอะแกรม mxGraph ที่ให้บริการกราฟเชิงโต้ตอบและแอปพลิเคชันแผนภูมิที่ทำงานในเบราว์เซอร์หลัก ๆ เช่น Chrome, Firefox, Edge และ Safari
ตัวอย่าง 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>
