<p>DAGを作れるアプリの機能と操作についてまとめてみました<br>
よかったら使ってみてください<br>
・素材ページ <a href="https://pycetra.com/raw" target="_blank" rel="nofollow noopener noreferrer">pycetra.com/raw</a><br>
・サンプル一覧 <a href="https://pycetra.com/index.html" target="_blank" rel="nofollow noopener noreferrer">pycetra.com</a></p>
<h1 id="%E6%A9%9F%E8%83%BD%E4%B8%80%E8%A6%A7">
<a class="header-anchor-link" href="#%E6%A9%9F%E8%83%BD%E4%B8%80%E8%A6%A7" aria-hidden="true"></a> 機能一覧</h1>
<table>
<thead>
<tr>
<th>挙動</th>
<th>操作</th>
<th>条件</th>
<th>before</th>
<th>after</th>
</tr>
</thead>
<tbody>
<tr>
<td>新規region</td>
<td>文字列編集</td>
<td>rootのnodeを対象とする</td>
<td><img src="https://res.cloudinary.com/zenn/image/fetch/s--F3AWAcrw--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/d09db1b37871e709f42dd4e2.png%3Fsha%3D48d3677418ca2a8f132146abbb7c4bf8b7829286" alt loading="lazy" class="md-img"></td>
<td><img src="https://res.cloudinary.com/zenn/image/fetch/s--c02k0KCv--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/8d88c753d831e1c12ce4c211.png%3Fsha%3D3b64963e6c6be874f9af863a8d97c4e8345078fa" alt loading="lazy" class="md-img"></td>
</tr>
<tr>
<td>移動region</td>
<td>drag and drop</td>
<td>position regionがあること</td>
<td><img src="https://res.cloudinary.com/zenn/image/fetch/s--tbSEoyCO--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/d074778a443d4a52ec5a0943.png%3Fsha%3D2b683f6f9874a93264d40ac341184e0fee66f961" alt loading="lazy" class="md-img"></td>
<td><img src="https://res.cloudinary.com/zenn/image/fetch/s--uUrsyXMA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/bde348cea57ebdacb1429d5f.png%3Fsha%3D74aaf5a0ea59ca2974a6e05b7bb7d52498cdc9ee" alt loading="lazy" class="md-img"></td>
</tr>
<tr>
<td>移動node</td>
<td>drag and drop</td>
<td>position regionがあること</td>
<td><img src="https://res.cloudinary.com/zenn/image/fetch/s--MLltxGg4--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/1e026ec1d1ad7b2e244504d9.png%3Fsha%3D74aaf5a0ea59ca2974a6e05b7bb7d52498cdc9ee" alt loading="lazy" class="md-img"></td>
<td><img src="https://res.cloudinary.com/zenn/image/fetch/s--EHVnS7mO--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/a17716a1479dfcc02e096d23.png%3Fsha%3D67213f4df50329483225a300bd608308fe3dadf2" alt loading="lazy" class="md-img"></td>
</tr>
<tr>
<td>新規link</td>
<td>enter</td>
<td>2つのnodeを選択済み</td>
<td><img src="https://res.cloudinary.com/zenn/image/fetch/s--etHY-di7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/1858b503c01b56ab19a6e77c.png%3Fsha%3D6b789aef68cff18c48bb2c09c0e3f9a9e28003bc" alt loading="lazy" class="md-img"></td>
<td><img src="https://res.cloudinary.com/zenn/image/fetch/s--ru2i6C2u--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/45650879ab9d20934226a6d2.png%3Fsha%3D0ab5baea77e835aa6131b90716c35f41f49a85a6" alt loading="lazy" class="md-img"></td>
</tr>
<tr>
<td>css編集</td>
<td>文字列編集</td>
<td>css region内である</td>
<td><img src="https://res.cloudinary.com/zenn/image/fetch/s--ZKP-ehY9--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/3ebeb9ed0ce1e9bb022b8f89.png%3Fsha%3D6c94a6461f3d83149f146c1e2eeb0e061671a1af" alt loading="lazy" class="md-img"></td>
<td><img src="https://res.cloudinary.com/zenn/image/fetch/s--yhlaw05a--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/87dbe9a24a533aab41a896c1.png%3Fsha%3D0f32baae2214f1c2703dad98bcc1dc6a49c9f159" alt loading="lazy" class="md-img"></td>
</tr>
</tbody>
</table>
<h1 id="%E5%9F%BA%E6%9C%AC%E6%93%8D%E4%BD%9C%E4%B8%80%E8%A6%A7">
<a class="header-anchor-link" href="#%E5%9F%BA%E6%9C%AC%E6%93%8D%E4%BD%9C%E4%B8%80%E8%A6%A7" aria-hidden="true"></a> 基本操作一覧</h1>
<table>
<thead>
<tr>
<th>挙動</th>
<th>操作</th>
<th>before</th>
<th>after</th>
</tr>
</thead>
<tbody>
<tr>
<td>新規 node</td>
<td>click</td>
<td><img src="https://res.cloudinary.com/zenn/image/fetch/s--xf5f5x6I--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/238186c26cb93f1829e4102e.png%3Fsha%3D2fc4b881b62b63e5282dcf947d2078e7d6f86770" alt loading="lazy" class="md-img"></td>
<td><img src="https://res.cloudinary.com/zenn/image/fetch/s--FVPx81gL--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/e111acd1567f85095c6b363c.png%3Fsha%3D60f8d5e575e6d65433a0d2c3c3054e9df31fa071" alt loading="lazy" class="md-img"></td>
</tr>
<tr>
<td>新規 node  （深いlevel）</td>
<td>tab</td>
<td><img src="https://res.cloudinary.com/zenn/image/fetch/s--bi02-xz---/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/aaa020510484724e5440a310.png%3Fsha%3D76a6bd8caee23c2158cb22c82baad51aaaf2f831" alt loading="lazy" class="md-img"></td>
<td><img src="https://res.cloudinary.com/zenn/image/fetch/s--xzK2jI6B--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/f95fe0d6d9088b23dda011f6.png%3Fsha%3Dbe6a8ec7a932a6bc8f4003e72c9dc8e8ad7044e1" alt loading="lazy" class="md-img"></td>
</tr>
<tr>
<td>新規 node  （同じlevel）</td>
<td>enter</td>
<td><img src="https://res.cloudinary.com/zenn/image/fetch/s--PJ-8I3NV--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/411956ab59cd0a17fea2a09e.png%3Fsha%3Dbe6a8ec7a932a6bc8f4003e72c9dc8e8ad7044e1" alt loading="lazy" class="md-img"></td>
<td><img src="https://res.cloudinary.com/zenn/image/fetch/s--Jqq1wTAZ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/8a63c29af0bbf99395a3b561.png%3Fsha%3Dd988a17f88a6b797950fb9ae97f9b5a973abcfba" alt loading="lazy" class="md-img"></td>
</tr>
<tr>
<td>削除 node</td>
<td>delete</td>
<td><img src="https://res.cloudinary.com/zenn/image/fetch/s--YJM_YOc7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/b6b5b8e3c245fbe9eb802696.png%3Fsha%3Dbbed8c0f7b72165b78ddd0d9d22570f54f02923a" alt loading="lazy" class="md-img"></td>
<td><img src="https://res.cloudinary.com/zenn/image/fetch/s--ellA2gng--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/a99f7598f60a55557decefcb.png%3Fsha%3D8401e21226298f978b95475aa50a7a6def6eb2b7" alt loading="lazy" class="md-img"></td>
</tr>
<tr>
<td>選択</td>
<td>click</td>
<td><img src="https://res.cloudinary.com/zenn/image/fetch/s--r-9pZGA2--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/c56ea8b63dd54b2083031736.png%3Fsha%3Dd60fc35ac0d2f0d54d700b49d538ec87c5da539e" alt loading="lazy" class="md-img"></td>
<td><img src="https://res.cloudinary.com/zenn/image/fetch/s--mUKPKgeA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/5f9548826ca49deefc3dca80.png%3Fsha%3Df0223b624d282495219cb177cff2ab81d640b369" alt loading="lazy" class="md-img"></td>
</tr>
<tr>
<td>追加選択</td>
<td>shift + click</td>
<td><img src="https://res.cloudinary.com/zenn/image/fetch/s--YJM_YOc7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/b6b5b8e3c245fbe9eb802696.png%3Fsha%3Dbbed8c0f7b72165b78ddd0d9d22570f54f02923a" alt loading="lazy" class="md-img"></td>
<td><img src="https://res.cloudinary.com/zenn/image/fetch/s--ellA2gng--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/a99f7598f60a55557decefcb.png%3Fsha%3D8401e21226298f978b95475aa50a7a6def6eb2b7" alt loading="lazy" class="md-img"></td>
</tr>
<tr>
<td>選択解除</td>
<td>esc</td>
<td><img src="https://res.cloudinary.com/zenn/image/fetch/s--v07xBAjz--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/88fd675d60baa19e32d6e2d8.png%3Fsha%3D1a88e6d4a9c58ffbb5239436f3c53b910a78e23a" alt loading="lazy" class="md-img"></td>
<td><img src="https://res.cloudinary.com/zenn/image/fetch/s--VicsDF1e--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/5e671fceb27b171ae3af6a7d.png%3Fsha%3Dd50bf121bd3c91a98d32070720d9b28cbbfc8e52" alt loading="lazy" class="md-img"></td>
</tr>
<tr>
<td>文字列編集</td>
<td>space / ctrl + i</td>
<td><img src="https://res.cloudinary.com/zenn/image/fetch/s--rapitd4p--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/f6253d39d1c7d6c7d53d51f0.png%3Fsha%3D0794d6ad3de4c472461f959c04f971f9f80f8874" alt loading="lazy" class="md-img"></td>
<td><img src="https://res.cloudinary.com/zenn/image/fetch/s--wCKMYdM7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/38ede3957f5819d5d1aa7c2b.png%3Fsha%3D4f97da1cec63cc688584f22dd0b1961dae33f5fb" alt loading="lazy" class="md-img"></td>
</tr>
<tr>
<td>文字列更新</td>
<td>shift + enter</td>
<td><img src="https://res.cloudinary.com/zenn/image/fetch/s--wJ-d6O2D--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/7650e2b7eb543f04c974ac00.png%3Fsha%3D155e795c1911d6b1a038947148a6ce448cc57dbb" alt loading="lazy" class="md-img"></td>
<td><img src="https://res.cloudinary.com/zenn/image/fetch/s--aLvq1EC0--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/d4a336bcff99f2cfc5fdd521.png%3Fsha%3D32542c13381842e956f06a9b7336458d4df60dff" alt loading="lazy" class="md-img"></td>
</tr>
<tr>
<td>拡大/縮小</td>
<td>ブラウザ標準の方法</td>
<td><img src="https://res.cloudinary.com/zenn/image/fetch/s--1Cy3VwkS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/0e138aaf575c31d59f8a3c65.png%3Fsha%3D2b105346d64fe2c474e74a822ddcabcc780c4b67" alt loading="lazy" class="md-img"></td>
<td><img src="https://res.cloudinary.com/zenn/image/fetch/s--QJ0Aq-fa--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/92d39c275859bc486851c707.png%3Fsha%3D5aabc2b919b53935ad73c73b36bbcaeffe7317e6" alt loading="lazy" class="md-img"></td>
</tr>
</tbody>
</table>
<h1 id="%E3%81%8A%E6%B0%97%E3%81%AB%E5%85%A5%E3%82%8A%E3%81%AEcss">
<a class="header-anchor-link" href="#%E3%81%8A%E6%B0%97%E3%81%AB%E5%85%A5%E3%82%8A%E3%81%AEcss" aria-hidden="true"></a> お気に入りのCSS</h1>
<p><img src="https://res.cloudinary.com/zenn/image/fetch/s--jnbAYHMx--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/71dcb875371ce92e66175842.png%3Fsha%3Df43adab9d4f1c4af99a13248a6f306efe13193ca" alt loading="lazy" class="md-img"></p>
<div class="code-block-container"><pre><code>- #css
- .select circle{stroke:blue;stroke-width:10px;}
- circle {r:10;fill:black;}
- .polyarrow {display:none}
- .linearrow {display:none}
-  #parror001{display:none}
- text{font-family: Meslo, Monaco,font-size: 15px;fill: black;transform: translate(15px, 0px);dominant-baseline: middle;}
- .position text{font-size:20px}
- .markdownpath path {display:block;stroke-width:10px;stroke:rgba(1,1,1,0.1);}
</code></pre></div>

DAG生成ツールを作ってみたので操作方法をまとめる

Discussion