Draw.ioテスト

約5分で読めます
⚠️ 注意: この記事はまだ作成中（Work In Progress）です。
目次

Draw.io の使い方

このブログでは Draw.io の図を直接表示できるようになりました。以下はサンプルです：

<mxfile host="app.diagrams.net" modified="2023-12-01T12:00:00.000Z" agent="5.0 (Macintosh)" etag="abcdef123456" version="14.6.13">
  <diagram id="sample-diagram" name="Page-1">
    <mxGraphModel dx="1422" dy="794" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />
        <mxCell id="2" value="スタート" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
          <mxGeometry x="340" y="180" width="120" height="60" as="geometry" />
        </mxCell>
        <mxCell id="3" value="処理" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
          <mxGeometry x="340" y="300" width="120" height="60" as="geometry" />
        </mxCell>
        <mxCell id="4" value="終了" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;" vertex="1" parent="1">
          <mxGeometry x="340" y="420" width="120" height="60" as="geometry" />
        </mxCell>
        <mxCell id="5" value="" style="endArrow=classic;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" edge="1" parent="1" source="2" target="3">
          <mxGeometry width="50" height="50" relative="1" as="geometry">
            <mxPoint x="390" y="400" as="sourcePoint" />
            <mxPoint x="440" y="350" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="6" value="" style="endArrow=classic;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" edge="1" parent="1" source="3" target="4">
          <mxGeometry width="50" height="50" relative="1" as="geometry">
            <mxPoint x="390" y="400" as="sourcePoint" />
            <mxPoint x="440" y="350" as="targetPoint" />
          </mxGeometry>
        </mxCell>
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

上の図は編集ボタンをクリックすることで直接 Draw.io で編集できます。