{"id":2596,"date":"2025-11-17T07:42:04","date_gmt":"2025-11-16T22:42:04","guid":{"rendered":"https:\/\/www.earce.biz\/?page_id=2596"},"modified":"2025-12-30T09:43:22","modified_gmt":"2025-12-30T00:43:22","slug":"tsv-to-draw-io","status":"publish","type":"page","link":"https:\/\/www.earce.biz\/?page_id=2596","title":{"rendered":"[Tool] TSV to Draw.io"},"content":{"rendered":"\n<style>\n  .data-items2 {\n    display: flex;\n    gap: 20px; \/* SVG \u540c\u58eb\u306e\u9593\u9694 *\/\n  }\n\n  .data-item2 {\n    display: flex;\n    flex-direction: column;\n    align-items: center; \/* SVG \u3068\u30e9\u30b8\u30aa\u3092\u4e2d\u592e\u63c3\u3048 *\/\n  }\n\n  .data-item2 svg {\n    display: block;\n  }\n\n  .data-item2 input[type=\"radio\"] {\n    margin-top: 8px;\n  }\n<\/style>\n\n<span class=\"data-label\">Diagram Pattern<\/span>\n<div class=\"data-items2\">\n  <!-- SVG 1 -->\n  <div class=\"data-item2\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"251\" height=\"90\">\n      <rect id=\"diagram1\" x=\"0\" y=\"0\" width=\"250\" height=\"90\" fill=\"#e67300\" stroke=\"#000000\"\/>\n      <text x=\"12\" y=\"20\" font-family=\"Helvetica\" font-size=\"14\" fill=\"#000000\">Title 1<\/text>\n      <text x=\"12\" y=\"38\" font-family=\"Helvetica\" font-size=\"14\" fill=\"#000000\">Detail 1-1<\/text>\n      <text x=\"12\" y=\"56\" font-family=\"Helvetica\" font-size=\"14\" fill=\"#000000\">Detail 1-2<\/text>\n    <\/svg>\n    <input type=\"radio\" name=\"pattern1\" id=\"pattern1\" value=\"1\" checked=\"true\">\n  <\/div>\n\n  <!-- SVG 2 -->\n  <div class=\"data-item2\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"251\" height=\"90\">\n      <rect id=\"diagram2\" x=\"0\" y=\"0\" width=\"250\" height=\"89\" fill=\"#ffffff\" stroke=\"#000000\"\/>\n      <line x1=\"0\" y1=\"40\" x2=\"250\" y2=\"40\" stroke=\"#000000\"\/>\n      <text x=\"125\" y=\"25\" font-family=\"Helvetica\" font-size=\"14\" font-weight=\"bold\" text-anchor=\"middle\">Title 1<\/text>\n      <text x=\"7\" y=\"60\" font-family=\"Helvetica\" font-size=\"12\" font-weight=\"bold\">Detail 1-1<\/text>\n      <text x=\"7\" y=\"80\" font-family=\"Helvetica\" font-size=\"12\" font-weight=\"bold\">Detail 1-2<\/text>\n    <\/svg>\n    <input type=\"radio\" name=\"pattern1\" id=\"pattern2\" value=\"2\">\n  <\/div>\n\n<\/div>\n<br \/>\n\n\n\n<form id=\"generateForm\" action=\"\/webapi\/tsv2drawio2\" method=\"post\">\n<div class=\"data-items\">\n  <div class=\"data-item\">\n    <span class=\"data-label\">Node Width<\/span>\n    <input name=\"width\" type=\"number\" value=\"250\" placeholder=\"200~600\"\/>\n  <\/div>\n  <br \/>\n  <div class=\"data-item\">\n    <span class=\"data-label\">TSV Data<\/span>\n    <textarea name=\"data\" rows=\"8\" cols=\"100\" placeholder=\"Title 1\tDetail 1-1\tDetail 1-2\nTitle 2\tDetail 2-1\tDetail 2-2\nTitle 3\tDetail 3-1\tDetail 3-2\n\"><\/textarea>\n  <\/div>\n  <div class=\"wp-block-button aligncenter custom-wide-button\">\n    <button type=\"submit\" class=\"wp-block-button__link has-background has-vivid-cyan-blue-background-color\">Generate<\/button>\n  <\/div>\n<\/form>\n\n\n\n<script type=\"text\/javascript\">\njQuery().ready(function($){\n\n$(\"#generateForm\").submit(\n  function(e) {\n    if ($('[name=\"data\"]').val() == \"\") {\n      $('[name=\"data\"]').val($('[name=\"data\"]').attr(\"placeholder\"));\n    }\n  }\n);\n\n$(\"#pattern1\").change(\n  function(e) {\n    $('#diagram1').attr('fill', '#e67300');\n    $('#diagram2').attr('fill', '#ffffff');\n    $('#generateForm').attr('action', '\/webapi\/tsv2drawio2');\n  }\n);\n\n$(\"#pattern2\").change(\n  function(e) {\n    $('#diagram1').attr('fill', '#ffffff');\n    $('#diagram2').attr('fill', '#e67300');\n    $('#generateForm').attr('action', '\/webapi\/tsv2drawio');\n  }\n);\n\n});\n<\/script>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Diagram Pattern Title 1 Detail 1-1 Detail 1-2 Title 1 Detail 1-1 Detail 1-2 Node Width TSV Data Generate<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":35,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2596","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.earce.biz\/index.php?rest_route=\/wp\/v2\/pages\/2596","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.earce.biz\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.earce.biz\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.earce.biz\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.earce.biz\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2596"}],"version-history":[{"count":64,"href":"https:\/\/www.earce.biz\/index.php?rest_route=\/wp\/v2\/pages\/2596\/revisions"}],"predecessor-version":[{"id":2760,"href":"https:\/\/www.earce.biz\/index.php?rest_route=\/wp\/v2\/pages\/2596\/revisions\/2760"}],"up":[{"embeddable":true,"href":"https:\/\/www.earce.biz\/index.php?rest_route=\/wp\/v2\/pages\/35"}],"wp:attachment":[{"href":"https:\/\/www.earce.biz\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2596"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}