CINXE.COM

<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8" /><title>draw.io (diagrams.net) の細かいテクニック #Draw.io - Qiita</title><meta content="みんな大好き draw.io (diagrams.net) の細かいテクニックです。ちなみに、2020年2月あたりから、セキュリティ上の理由でサイトのドメインを diagrams.net に名称変…" name="description" /><meta content="width=device-width,initial-scale=1,shrink-to-fit=no,viewport-fit=cover" name="viewport" /><meta content="#ffffff" name="theme-color" /><meta content="XWpkTG32-_C4joZoJ_UsmDUi-zaH-hcrjF6ZC_FoFbk" name="google-site-verification" /><meta content="telephone=no" name="format-detection" /><link rel="canonical" href="https://qiita.com/ohtsuka1317/items/4519bc2d08899ddf6a83" /><link href="/manifest.json" rel="manifest" /><link href="/opensearch.xml" rel="search" title="Qiita" type="application/opensearchdescription+xml" /><link as="script" href="https://www.googletagservices.com/tag/js/gpt.js" rel="preload" /><link href="https://securepubads.g.doubleclick.net" rel="preconnect" /><script async="" src="https://www.googletagservices.com/tag/js/gpt.js"></script><meta name="csrf-param" content="authenticity_token" /> <meta name="csrf-token" content="xXcnuz3JUUsNP0yrhKhy48vdbtE0wzGDJdxmTWWeXdcRpypwyRfIzQI2OGvh0PDRpKi1KBCftYREmdLsEKYu2Q" /><link rel="icon" type="image/x-icon" href="https://cdn.qiita.com/assets/favicons/public/production-c620d3e403342b1022967ba5e3db1aaa.ico" /><link rel="apple-touch-icon" type="image/png" href="https://cdn.qiita.com/assets/favicons/public/apple-touch-icon-ec5ba42a24ae923f16825592efdc356f.png" /><link rel="stylesheet" href="https://cdn.qiita.com/assets/public/article-3c146ab3ef20c04bf76d6709e24df1aa.min.css" media="all" /><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,500,0..1,-25..0" media="all" /><script src="https://cdn.qiita.com/assets/public/v3-article-bundle-c15fe28a114fce30.min.js" defer="defer"></script><meta name="twitter:card" content="summary_large_image"><meta content="@Qiita" name="twitter:site" /><meta property="og:type" content="article"><meta property="og:title" content="draw.io (diagrams.net) の細かいテクニック - Qiita"><meta property="og:image" content="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGNDMzNTUlMkZwcm9maWxlLWltYWdlcyUyRjE0NzM2ODk1MDI_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmZtPXBuZzMyJnM9NzFlNDMyYzdiZDY0ZTQyMzM5YjdkMjE0NDY0YjNkMGM%26blend-x%3D120%26blend-y%3D467%26blend-w%3D82%26blend-h%3D82%26blend-mode%3Dnormal%26s%3Dc865584714b348038d06107e39c5c76e?ixlib=rb-4.0.0&w=1200&fm=jpg&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9ZHJhdy5pbyUyMCUyOGRpYWdyYW1zLm5ldCUyOSUyMCVFMyU4MSVBRSVFNyVCNCVCMCVFMyU4MSU4QiVFMyU4MSU4NCVFMyU4MyU4NiVFMyU4MiVBRiVFMyU4MyU4QiVFMyU4MyU4MyVFMyU4MiVBRiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1wYWQ9MCZzPWI0Njk2ZmU1YWVhMjNlMDM3NTU4NmRmODE1MzQ5NGUz&mark-x=120&mark-y=112&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBvaHRzdWthMTMxNyZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1wYWQ9MCZzPTcyMTRiNzA0OWJhYTQ3ZDkyM2ZkMDU0ZGY5MzEwMDUy&blend-x=242&blend-y=480&blend-w=838&blend-h=46&blend-fit=crop&blend-crop=left%2Cbottom&blend-mode=normal&s=bf27011a1b8e9a24e961580681d1af3c"><meta property="og:description" content="みんな大好き draw.io (diagrams.net) の細かいテクニックです。ちなみに、2020年2月あたりから、セキュリティ上の理由でサイトのドメインを diagrams.net に名称変…"><meta content="https://qiita.com/ohtsuka1317/items/4519bc2d08899ddf6a83" property="og:url" /><meta content="Qiita" property="og:site_name" /><meta content="564524038" property="fb:admins" /><meta content="Draw.io" name="keywords" /><script>!function(f,b,e,v,n,t,s) {if(f.fbq)return;n=f.fbq=function(){n.callMethod? n.callMethod.apply(n,arguments):n.queue.push(arguments)}; if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0'; n.queue=[];t=b.createElement(e);t.async=!0; t.src=v;s=b.getElementsByTagName(e)[0]; s.parentNode.insertBefore(t,s)}(window, document,'script', 'https://connect.facebook.net/en_US/fbevents.js'); fbq('init', '305156090176370'); fbq('trackSingle', '305156090176370', 'PageView');</script><noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=305156090176370&ev=PageView&noscript=1"/></noscript><style data-emotion="style-global ffh7zq">.style-ffh7zq{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:56px;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;padding:16px 24px 0;}@media (max-width: 1199px){.style-ffh7zq{gap:24px;}}@media (max-width: 769px){.style-ffh7zq{padding:16px 16px 0;}}@media (max-width: 479px){.style-ffh7zq{padding:16px 0 0;}}</style><style data-emotion="style-global 1hl01qi">.style-1hl01qi{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:16px;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;position:-webkit-sticky;position:sticky;top:40px;z-index:5;}@media (max-width: 769px){.style-1hl01qi{display:none;}}</style><style data-emotion="style-global c1wjhj">.style-c1wjhj{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:0;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}</style><style data-emotion="style-global 1duml6f">.style-1duml6f{height:40px;width:40px;position:relative;}.style-1duml6f svg{cursor:auto;pointer-events:none;}</style><style data-emotion="style-global ftns26">.style-ftns26{fill:none;left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);}.style-ftns26 .circle,.style-ftns26 .heart-stroke,.style-ftns26 .heart-fill,.style-ftns26 .particle{-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;transform-origin:center center;}.style-ftns26 .circle{fill:var(--color-surface);stroke:var(--color-divider);stroke-width:1;}.style-ftns26 .heart-stroke{fill:var(--color-mediumEmphasis);}.style-ftns26 .heart-fill{fill:var(--color-qiitaGreen);opacity:0;}.style-ftns26 .particles{rotate:var(--rotate);transform-origin:center center;}.style-ftns26 .particle{opacity:0;}.style-ftns26.liked .circle{-webkit-animation-delay:90ms;animation-delay:90ms;-webkit-animation-duration:60ms;animation-duration:60ms;-webkit-animation-name:animation-1n63bow;animation-name:animation-1n63bow;}.style-ftns26.liked .heart-stroke{-webkit-animation-duration:150ms;animation-duration:150ms;-webkit-animation-name:animation-d4tj02;animation-name:animation-d4tj02;}.style-ftns26.liked .heart-fill{-webkit-animation-delay:150ms;animation-delay:150ms;-webkit-animation-duration:100ms;animation-duration:100ms;-webkit-animation-name:animation-19addpb;animation-name:animation-19addpb;}.style-ftns26.liked .particle{-webkit-animation-delay:150ms;animation-delay:150ms;-webkit-animation-duration:var(--duration);animation-duration:var(--duration);-webkit-animation-name:animation-1spcwjj;animation-name:animation-1spcwjj;}</style><style data-emotion="style-global animation-1spcwjj">@-webkit-keyframes animation-1spcwjj{1%{opacity:1;}90%{opacity:1;}100%{cx:var(--x);cy:var(--y);opacity:0;}}@keyframes animation-1spcwjj{1%{opacity:1;}90%{opacity:1;}100%{cx:var(--x);cy:var(--y);opacity:0;}}</style><style data-emotion="style-global animation-19addpb">@-webkit-keyframes animation-19addpb{1%{scale:1.2;opacity:1;}100%{scale:1;opacity:1;}}@keyframes animation-19addpb{1%{scale:1.2;opacity:1;}100%{scale:1;opacity:1;}}</style><style data-emotion="style-global animation-d4tj02">@-webkit-keyframes animation-d4tj02{40%{fill:currentColor;scale:0.85;}100%{fill:var(--color-qiitaGreen);}}@keyframes animation-d4tj02{40%{fill:currentColor;scale:0.85;}100%{fill:var(--color-qiitaGreen);}}</style><style data-emotion="style-global animation-1n63bow">@-webkit-keyframes animation-1n63bow{100%{stroke:var(--color-qiitaGreen);}}@keyframes animation-1n63bow{100%{stroke:var(--color-qiitaGreen);}}</style><style data-emotion="style-global 10ttvi6">.style-10ttvi6{background-color:transparent;border:none;cursor:pointer;height:40px;padding:0;position:absolute;width:40px;}.style-10ttvi6:disabled{cursor:not-allowed;}</style><style data-emotion="style-global wknrvb">@media (max-width: 769px){.style-wknrvb{display:block;}}</style><style data-emotion="style-global 3fim88">.style-3fim88{position:relative;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;}</style><style data-emotion="style-global 1a6dkvp">.style-1a6dkvp{color:var(--color-mediumEmphasis);cursor:pointer;font-size:var(--font-size-body-2);font-weight:bold;}</style><style data-emotion="style-global 16g96ve">.style-16g96ve{background-color:var(--color-grayContainer);border-radius:4px;color:var(--color-onContainerText);font-size:var(--font-size-body-3);max-width:280px;overflow-wrap:break-word;padding:4px 8px;position:absolute;pointer-events:none;display:none;width:-webkit-max-content;width:-moz-max-content;width:max-content;z-index:1;top:50%;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);left:calc(100% + 0px + 4px);}.style-16g96ve::after{background-color:var(--color-grayContainer);content:"";position:absolute;}.style-16g96ve::after{-webkit-clip-path:polygon(0% 50%, 100% 0%, 100% 100%, 0% 50%);clip-path:polygon(0% 50%, 100% 0%, 100% 100%, 0% 50%);height:8px;right:100%;top:50%;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);width:4px;}</style><style data-emotion="style-global 1bc9a2c">.style-1bc9a2c{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:0;position:relative;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}</style><style data-emotion="style-global 100tu0r">.style-100tu0r{display:inline-block;fill:var(--color-mediumEmphasis);height:24px;width:24px;}</style><style data-emotion="style-global 1vem4tk">.style-1vem4tk{color:var(--color-mediumEmphasis);font-size:14px;font-weight:bold;}@media (max-width: 769px){.style-1vem4tk{display:inline;}}</style><style data-emotion="style-global 1n9ulpr">.style-1n9ulpr{border:none;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;background-color:transparent;border:none;color:var(--color-mediumEmphasis);cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;font-size:20px;height:32px;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;padding:0;width:32px;}</style><style data-emotion="style-global 1b1cd5z">.style-1b1cd5z{height:20px;fill:var(--color-twitter);width:20px;}</style><style data-emotion="style-global 157xj1g">.style-157xj1g{height:20px;fill:#1877f2;width:20px;}</style><style data-emotion="style-global 1uu7u3w">.style-1uu7u3w{height:20px;width:20px;}</style><style data-emotion="style-global 79elbk">.style-79elbk{position:relative;}</style><style data-emotion="style-global v2p563">.style-v2p563{display:inline-block;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;font-size:24px;height:24px;overflow:hidden;width:24px;}</style><style data-emotion="style-global oi42s2">.style-oi42s2:modal{background-color:transparent;border:none;max-height:none;max-width:none;width:100%;height:100dvh;display:grid;place-items:center;padding:16px;}.style-oi42s2::backdrop{background-color:rgb(0 0 0 / .32);}</style><style data-emotion="style-global 2aaf4j">.style-2aaf4j{background-color:var(--color-surface);border-radius:8px;color:var(--color-highEmphasis);max-width:600px;max-height:calc(100vh - 160px);overflow-y:auto;padding:24px;width:100%;scrollbar-width:thin;scrollbar-color:var(--scrollbar-color-scrollbarThumb) transparent;}.style-2aaf4j::-webkit-scrollbar{width:8px;}.style-2aaf4j::-webkit-scrollbar-track{background:transparent;}.style-2aaf4j::-webkit-scrollbar-thumb{background:var(--scrollbar-color-scrollbarThumb);border-radius:4px;}</style><style data-emotion="style-global bxc62b">.style-bxc62b{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-bottom:1px solid var(--color-divider);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;padding-bottom:8px;}</style><style data-emotion="style-global 1snuvpu">.style-1snuvpu{font-size:var(--font-size-subhead-2);font-weight:600;line-height:1.4;}</style><style data-emotion="style-global o8tyjw">.style-o8tyjw{background-color:transparent;color:var(--color-mediumEmphasis);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:4px;}</style><style data-emotion="style-global 6vdptm">.style-6vdptm{font-size:var(--font-size-body-1);margin-top:16px;}</style><style data-emotion="style-global 111ab2g">.style-111ab2g{border-top:1px solid var(--color-divider);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:16px;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;margin-top:16px;padding-top:16px;}</style><style data-emotion="style-global hreeih">.style-hreeih{border-radius:8px;box-sizing:border-box;cursor:pointer;display:inline-block;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;font-size:16px;font-weight:600;line-height:1.8;margin-bottom:0;min-height:34px;min-width:64px;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;-webkit-transition:.1s ease-out;transition:.1s ease-out;transition-property:background-color,border-color;background-color:var(--color-surface);border:1px solid var(--color-grayBorder);color:var(--color-grayText);padding:3px 15px;}.style-hreeih:disabled{box-shadow:none;cursor:not-allowed;opacity:0.32;}.style-hreeih:active{background-color:var(--color-background);}@media (hover: hover) and (pointer: fine){.style-hreeih:hover{background-color:var(--color-background);}}</style><style data-emotion="style-global y54waz">.style-y54waz{border-radius:8px;box-sizing:border-box;cursor:pointer;display:inline-block;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;font-size:16px;font-weight:600;line-height:1.8;margin-bottom:0;min-height:34px;min-width:64px;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;-webkit-transition:.1s ease-out;transition:.1s ease-out;transition-property:background-color,border-color;background-color:var(--color-redContainer);color:var(--color-onContainerText);padding:4px 16px;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:4px;}.style-y54waz:disabled{box-shadow:none;cursor:not-allowed;opacity:0.32;}.style-y54waz:active{background-color:var(--color-redContainerDim);}@media (hover: hover) and (pointer: fine){.style-y54waz:hover{background-color:var(--color-redContainerDim);}}</style><style data-emotion="style-global 1jvcm2e">.style-1jvcm2e{display:inline-block;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;font-size:16px;height:16px;overflow:hidden;width:16px;}</style><style data-emotion="style-global 1hbd3g7">.style-1hbd3g7{height:250px;}</style><style data-emotion="style-global itrjxe">.style-itrjxe{background-color:var(--color-surface);border-radius:8px;padding:32px 56px;margin-bottom:24px;}@media (max-width: 769px){.style-itrjxe{padding:24px 32px;}}@media (max-width: 479px){.style-itrjxe{border-radius:0;margin:0 0 40px;padding:24px 16px;}}</style><style data-emotion="style-global 1cpeld6">.style-1cpeld6{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--color-yellowContainerVariant);border-radius:8px;color:var(--color-highEmphasis);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;font-size:var(--font-size-body-2);font-weight:600;gap:8px;line-height:1.5;margin-bottom:16px;padding:16px;}</style><style data-emotion="style-global 1l7bzw8">.style-1l7bzw8{display:inline-block;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;font-size:24px;height:24px;overflow:hidden;width:24px;color:var(--color-yellowText);}</style><style data-emotion="style-global 8qb8m4">.style-8qb8m4{margin-bottom:48px;}</style><style data-emotion="style-global 1yndj8s">.style-1yndj8s{display:grid;gap:8px;margin-bottom:16px;}</style><style data-emotion="style-global i43zkt">.style-i43zkt{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;font-size:var(--font-size-body-2);gap:0 8px;line-height:var(--line-height-body);width:100%;}</style><style data-emotion="style-global 17gh4w8">.style-17gh4w8{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:0 8px;width:calc(100% - 40px);}</style><style data-emotion="style-global mavs84">.style-mavs84{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--color-highEmphasis);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;font-size:var(--font-size-body-1);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;}</style><style data-emotion="style-global kcbbwa">.style-kcbbwa{border-radius:50%;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;overflow:hidden;position:relative;width:24px;height:24px;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin-right:8px;}.style-kcbbwa::before{background-color:var(--color-gray0);border-radius:50%;content:"";height:23px;left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:23px;}</style><style data-emotion="style-global 1wqqt93">.style-1wqqt93{display:block;height:24px;object-fit:contain;position:relative;width:24px;}</style><style data-emotion="style-global wo2a1i">.style-wo2a1i{font-size:28px;font-weight:600;line-height:var(--line-height-headline);margin-top:8px;word-break:break-all;}</style><style data-emotion="style-global 28f073">.style-28f073{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:4px;margin-top:16px;}</style><style data-emotion="style-global mp1hhj">.style-mp1hhj{background-color:var(--color-surfaceVariant);border-radius:4px;color:var(--color-mediumEmphasis);display:block;font-size:var(--font-size-body-2);line-height:var(--line-height-body-dense);padding:0 6px;position:relative;z-index:1;}.style-mp1hhj:active{-webkit-text-decoration:none;text-decoration:none;background-color:var(--color-surfaceVariantDim);}@media (hover: hover) and (pointer: fine){.style-mp1hhj:hover{-webkit-text-decoration:none;text-decoration:none;background-color:var(--color-surfaceVariantDim);}}</style><style data-emotion="style-global 1npej5s">.style-1npej5s{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;font-size:var(--font-size-body-2);gap:0 8px;margin-top:8px;}</style><style data-emotion="style-global 1r3vbu3">.style-1r3vbu3{display:grid;gap:24px;margin-top:32px;}</style><style data-emotion="style-global gg4vpm">.style-gg4vpm{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}</style><style data-emotion="style-global 1f18zs1">.style-1f18zs1{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:16px;}</style><style data-emotion="style-global aaiy04">.style-aaiy04{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:4px;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}</style><style data-emotion="style-global buogjo">@media (max-width: 769px){.style-buogjo{display:none;}}</style><style data-emotion="style-global uw35c3">.style-uw35c3{background-color:var(--color-grayContainer);border-radius:4px;color:var(--color-onContainerText);font-size:var(--font-size-body-3);max-width:280px;overflow-wrap:break-word;padding:4px 8px;position:absolute;pointer-events:none;display:none;width:-webkit-max-content;width:-moz-max-content;width:max-content;z-index:1;bottom:calc(100% + 0px + 4px);left:50%;-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);}.style-uw35c3::after{background-color:var(--color-grayContainer);content:"";position:absolute;}.style-uw35c3::after{-webkit-clip-path:polygon(0% 0%, 100% 0%, 50% 100%, 50% 100%);clip-path:polygon(0% 0%, 100% 0%, 50% 100%, 50% 100%);height:4px;left:50%;top:100%;-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);width:8px;}</style><style data-emotion="style-global izmm4j">.style-izmm4j{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;gap:4px;position:relative;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}</style><style data-emotion="style-global 1129w32">.style-1129w32{color:var(--color-mediumEmphasis);font-size:14px;font-weight:bold;}@media (max-width: 769px){.style-1129w32{display:none;}}</style><style data-emotion="style-global tzv11m">.style-tzv11m{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:4px;color:var(--color-highEmphasis);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;font-size:var(--font-size-body-2);gap:4px;padding:0 4px;}.style-tzv11m:active{background-color:var(--color-surfaceVariant);-webkit-text-decoration:none;text-decoration:none;}@media (hover: hover) and (pointer: fine){.style-tzv11m:hover{background-color:var(--color-surfaceVariant);-webkit-text-decoration:none;text-decoration:none;}}</style><style data-emotion="style-global n5k90r">.style-n5k90r{display:inline-block;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;font-size:16px;height:16px;overflow:hidden;width:16px;color:var(--color-mediumEmphasis);}</style><style data-emotion="style-global rwy56f">.style-rwy56f{background-image:url(//cdn.qiita.com/assets/public/image-qiitan_for_login_modal-014e085d3e40a240e3fe8d61b70b29a9.png);-webkit-background-position:bottom 24px right 24px;background-position:bottom 24px right 24px;background-repeat:no-repeat;-webkit-background-size:140px;background-size:140px;border:1px solid var(--color-greenBorder);border-radius:8px;margin:40px auto 0;max-width:572px;padding:24px;}@media (max-width: 769px){.style-rwy56f{width:100%;background-image:none;}}</style><style data-emotion="style-global 1nyasl8">.style-1nyasl8{font-size:var(--font-size-subhead-1);font-weight:600;line-height:1.4;}@media (max-width: 769px){.style-1nyasl8{font-size:var(--font-size-subhead-2);}}</style><style data-emotion="style-global 1i89dtz">.style-1i89dtz{font-size:var(--font-size-body-1);font-weight:600;list-style-position:inside;margin-top:16px;}@media (max-width: 769px){.style-1i89dtz{font-size:var(--font-size-body-2);}}</style><style data-emotion="style-global dzaums">.style-dzaums{display:inline-block;font-size:var(--font-size-body-2);margin-top:16px;-webkit-text-decoration:underline;text-decoration:underline;}</style><style data-emotion="style-global geahq7">.style-geahq7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:16px;margin-top:16px;}@media (max-width: 769px){.style-geahq7{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}}</style><style data-emotion="style-global 1dq3d3h">.style-1dq3d3h{border-radius:8px;box-sizing:border-box;display:inline-block;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;font-size:16px;font-weight:600;line-height:1.8;min-height:34px;min-width:64px;opacity:1;pointer-events:auto;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;-webkit-transition:.1s ease-out;transition:.1s ease-out;transition-property:background-color,border-color;background-color:var(--color-greenContainer);color:var(--color-onContainerText);padding:4px 16px;gap:16px;}.style-1dq3d3h:hover{-webkit-text-decoration:none;text-decoration:none;}.style-1dq3d3h:active{background-color:var(--color-greenContainerDim);}@media (hover: hover) and (pointer: fine){.style-1dq3d3h:hover{background-color:var(--color-greenContainerDim);}}@media (max-width: 769px){.style-1dq3d3h{width:100%;}}</style><style data-emotion="style-global tfrxbl">.style-tfrxbl{border-radius:8px;box-sizing:border-box;display:inline-block;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;font-size:16px;font-weight:600;line-height:1.8;min-height:34px;min-width:64px;opacity:1;pointer-events:auto;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;-webkit-transition:.1s ease-out;transition:.1s ease-out;transition-property:background-color,border-color;background-color:var(--color-surface);border:1px solid var(--color-grayBorder);color:var(--color-grayText);padding:3px 15px;gap:16px;}.style-tfrxbl:hover{-webkit-text-decoration:none;text-decoration:none;}.style-tfrxbl:active{background-color:var(--color-background);}@media (hover: hover) and (pointer: fine){.style-tfrxbl:hover{background-color:var(--color-background);}}@media (max-width: 769px){.style-tfrxbl{width:100%;}}</style><style data-emotion="style-global 1395ble">.style-1395ble{background-color:var(--color-background);bottom:0;box-shadow:0px 1px 1px 0px rgba(30, 33, 33, 0.25),0px 0px 0px 1px var(--elevation-color-elevationDivider);display:none;height:calc(env(safe-area-inset-bottom, 0px) + 56px);-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;padding-bottom:env(safe-area-inset-bottom, 0px);position:fixed;width:100%;z-index:1000;}@media (max-width: 769px){.style-1395ble{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}}</style><style data-emotion="style-global 5jpx49">.style-5jpx49{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;-webkit-justify-content:space-evenly;justify-content:space-evenly;width:100%;}</style><style data-emotion="style 1xwfn2v 1o9h1hg 1vr7y3r 3k9iaf">.style-1xwfn2v{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;background-color:var(--color-surface);border:1px solid var(--color-divider);border-radius:50%;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:40px;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;width:40px;}.style-1o9h1hg{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;background-color:transparent;border:none;color:var(--color-mediumEmphasis);cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;font-size:20px;height:32px;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;padding:0;width:32px;}.style-1vr7y3r{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;background-color:transparent;border:none;border-radius:50%;color:var(--color-mediumEmphasis);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;font-size:var(--font-size-subhead-1);height:32px;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;padding:0;width:32px;}.style-3k9iaf{color:var(--color-mediumEmphasis);}</style><style data-emotion="style-global 1736035">.style-1736035{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;font-size:var(--font-size-body-2);font-weight:600;list-style:none;max-width:1656px;overflow-x:auto;padding:0 32px;width:100%;scrollbar-width:thin;scrollbar-color:var(--scrollbar-color-scrollbarThumb) transparent;}.style-1736035::-webkit-scrollbar{height:8px;}.style-1736035::-webkit-scrollbar-track{background:transparent;}.style-1736035::-webkit-scrollbar-thumb{background:var(--scrollbar-color-scrollbarThumb);border-radius:4px;}@media (max-width: 769px){.style-1736035{padding:0 16px;}}</style><style data-emotion="style-global 1cnt4b8">.style-1cnt4b8{background-color:var(--color-surface);}</style><style data-emotion="style-global ymuwam">.style-ymuwam{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:auto;max-width:1656px;padding:8px 32px 0;width:100%;}@media (max-width: 769px){.style-ymuwam{padding:8px 16px 0;}}</style><style data-emotion="style-global fv3lde">.style-fv3lde{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}</style><style data-emotion="style-global 1etvg7j">.style-1etvg7j{background-color:var(--color-qiitaGreen);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:6px 10px;border-radius:4px;}.style-1etvg7j >svg{fill:var(--color-gray0);height:18px;}</style><style data-emotion="style-global 68a7fl">.style-68a7fl{margin-right:12px;position:relative;width:320px;}@media (max-width: 991px){.style-68a7fl{display:none;}}</style><style data-emotion="style-global 18lpml7">.style-18lpml7{display:inline-block;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;font-size:16px;height:16px;overflow:hidden;width:16px;color:var(--color-mediumEmphasis);left:8px;position:absolute;top:50%;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);}</style><style data-emotion="style-global 1gmi769">.style-1gmi769{background-color:var(--color-surfaceVariant);border:none;border-radius:8px;color:var(--color-highEmphasis);font-size:var(--font-size-body-1);line-height:var(--line-height-body);padding:4px 8px 4px 32px;width:100%;}.style-1gmi769::-webkit-input-placeholder{color:var(--color-disabled);}.style-1gmi769::-moz-placeholder{color:var(--color-disabled);}.style-1gmi769:-ms-input-placeholder{color:var(--color-disabled);}.style-1gmi769::placeholder{color:var(--color-disabled);}.style-1gmi769::-webkit-search-cancel-button{-webkit-appearance:none;}</style><style data-emotion="style-global 17ja8a3">.style-17ja8a3{display:none;}@media (max-width: 991px){.style-17ja8a3{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:inherit;color:var(--color-mediumEmphasis);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;font-size:var(--font-size-body-1);-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;padding:10px;}}.style-17ja8a3:active{color:var(--color-highEmphasis);}@media (hover: hover) and (pointer: fine){.style-17ja8a3:hover{color:var(--color-highEmphasis);}}</style><style data-emotion="style-global v2p563">.style-v2p563{display:inline-block;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;font-size:24px;height:24px;overflow:hidden;width:24px;}</style><style data-emotion="style-global 1afofdy">.style-1afofdy{-webkit-transform:scale(0,0);-moz-transform:scale(0,0);-ms-transform:scale(0,0);transform:scale(0,0);position:absolute;}</style><style data-emotion="style-global 1sn73cs">.style-1sn73cs{border-radius:8px;box-sizing:border-box;display:inline-block;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;font-size:14px;font-weight:600;line-height:1.8;min-height:34px;min-width:64px;opacity:1;pointer-events:auto;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;-webkit-transition:.1s ease-out;transition:.1s ease-out;transition-property:background-color,border-color;background-color:var(--color-surface);border:1px solid var(--color-greenBorder);color:var(--color-greenText);padding:3px 15px;margin-left:4px;}.style-1sn73cs:hover{-webkit-text-decoration:none;text-decoration:none;}.style-1sn73cs:active{background-color:var(--color-background);}@media (hover: hover) and (pointer: fine){.style-1sn73cs:hover{background-color:var(--color-background);}}</style><style data-emotion="style-global 1r635es">.style-1r635es{border-radius:8px;box-sizing:border-box;display:inline-block;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;font-size:14px;font-weight:600;line-height:1.8;min-height:34px;min-width:64px;opacity:1;pointer-events:auto;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;-webkit-transition:.1s ease-out;transition:.1s ease-out;transition-property:background-color,border-color;background-color:var(--color-greenContainer);color:var(--color-onContainerText);padding:4px 16px;margin-left:8px;}.style-1r635es:hover{-webkit-text-decoration:none;text-decoration:none;}.style-1r635es:active{background-color:var(--color-greenContainerDim);}@media (hover: hover) and (pointer: fine){.style-1r635es:hover{background-color:var(--color-greenContainerDim);}}</style><style data-emotion="style-global o5vjsc">.style-o5vjsc{display:none;margin:8px auto 0;width:calc(100vw - 32px);position:relative;}</style><style data-emotion="style-global 1l4w6pd">.style-1l4w6pd{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}</style><style data-emotion="style-global 1ygoan4">.style-1ygoan4{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--color-mediumEmphasis);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;white-space:nowrap;padding:4px 12px;margin:4px 0;}.style-1ygoan4:hover{background-color:var(--color-surfaceVariant);border-radius:4px;color:var(--color-highEmphasis);-webkit-text-decoration:none;text-decoration:none;}</style><style data-emotion="style-global 1o3zxqp">.style-1o3zxqp{display:inline-block;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;font-size:16px;height:16px;overflow:hidden;width:16px;margin-left:4px;}</style><style data-emotion="style 1qkvt8e">.style-1qkvt8e{margin-right:2px;}</style><style data-emotion="style "></style><style data-emotion="style-global 1geho0x">.style-1geho0x{color:var(--color-gray0);background-color:var(--color-gray90);display:grid;grid-template-columns:minmax(0, 1592px);-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;margin-top:64px;padding:48px 32px;width:100%;}@media (max-width: 991px){.style-1geho0x{padding-inline:16px;}}</style><style data-emotion="style-global 1vesoht">.style-1vesoht{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}@media (max-width: 1199px){.style-1vesoht{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}}</style><style data-emotion="style-global 1xygyrj">.style-1xygyrj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-right:48px;}</style><style data-emotion="style-global j7qwjs">.style-j7qwjs{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}</style><style data-emotion="style-global 1g0k1wk">.style-1g0k1wk{fill:var(--color-gray0);}</style><style data-emotion="style-global 754ift">.style-754ift{font-size:var(--font-size-body-2);margin-top:16px;}</style><style data-emotion="style-global zsz8fb">.style-zsz8fb{display:block;margin-top:16px;}</style><style data-emotion="style-global 1efditc">.style-1efditc{border-radius:8px;display:block;}</style><style data-emotion="style-global 120vwzo">.style-120vwzo{font-size:var(--font-size-body-3);}@media (max-width: 1199px){.style-120vwzo{margin-top:24px;}}</style><style data-emotion="style-global 15fzge">.style-15fzge{margin-left:4px;}</style><style data-emotion="style-global 16bbk6m">.style-16bbk6m{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:48px;}@media (max-width: 1199px){.style-16bbk6m{gap:32px;margin-top:48px;}}@media (max-width: 769px){.style-16bbk6m{gap:24px;}}@media (max-width: 479px){.style-16bbk6m{-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}}</style><style data-emotion="style-global u4ybgy">.style-u4ybgy{width:160px;}</style><style data-emotion="style-global 35ezg3">.style-35ezg3{font-weight:600;}</style><style data-emotion="style-global 1fhgjcy">.style-1fhgjcy{margin-top:4px;}</style><style data-emotion="style-global ah54os">.style-ah54os{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--color-gray0);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;font-size:var(--font-size-body-2);padding-top:4px;padding-bottom:4px;}</style><style data-emotion="style-global ox3ag9">.style-ox3ag9{height:14px;fill:currentColor;width:14px;}</style><style data-emotion="style "></style><link as="style" crossorigin="anonymous" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" onload="this.onload=null;this.rel='stylesheet'" referrerpolicy="no-referrer" rel="preload" /><noscript><link crossorigin="anonymous" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" referrerpolicy="no-referrer" rel="stylesheet" /></noscript></head><body><div class="allWrapper"><div id="GlobalHeader-react-component-672efe6b-497f-4e91-be2b-c3cd5e4c0e73"><div class="style-1cnt4b8"><header><div class="style-ymuwam"><div class="style-fv3lde"><a href="/" aria-label="Qiita" class="style-1etvg7j"><svg viewBox="0 0 426.57 130" aria-hidden="true"><circle cx="167.08" cy="21.4" r="12.28"></circle><path d="M250.81 29.66h23.48v18.9h-23.48z"></path><path d="M300.76 105.26a22.23 22.23 0 01-6.26-.86 12.68 12.68 0 01-5.17-3 14.41 14.41 0 01-3.56-5.76 28 28 0 01-1.3-9.22V48.56h29.61v-18.9h-29.52V3.29h-20.17v83.34q0 11.16 2.83 18.27a27.71 27.71 0 007.7 11.2 26.86 26.86 0 0011.43 5.62 47.56 47.56 0 0012.34 1.53h15.16v-18zM0 61.7a58.6 58.6 0 015-24.21A62.26 62.26 0 0118.73 17.9 63.72 63.72 0 0139 4.78 64.93 64.93 0 0164 0a65 65 0 0124.85 4.78 64.24 64.24 0 0120.38 13.12A62 62 0 01123 37.49a58.6 58.6 0 015 24.21 58.34 58.34 0 01-4 21.46 62.8 62.8 0 01-10.91 18.16l11.1 11.1a10.3 10.3 0 010 14.52 10.29 10.29 0 01-14.64 0l-12.22-12.41a65 65 0 01-15.78 6.65 66.32 66.32 0 01-17.55 2.3 64.63 64.63 0 01-45.23-18A62.82 62.82 0 015 85.81 58.3 58.3 0 010 61.7zm21.64.08a43.13 43.13 0 0012.42 30.63 42.23 42.23 0 0013.43 9.09A41.31 41.31 0 0064 104.8a42 42 0 0030-12.39 42.37 42.37 0 009-13.64 43.43 43.43 0 003.3-17 43.77 43.77 0 00-3.3-17A41.7 41.7 0 0080.55 22 41.78 41.78 0 0064 18.68 41.31 41.31 0 0047.49 22a42.37 42.37 0 00-13.43 9.08 43.37 43.37 0 00-12.42 30.7zM331.89 78a47.59 47.59 0 013.3-17.73 43.22 43.22 0 019.34-14.47A44.25 44.25 0 01359 36a47.82 47.82 0 0118.81-3.58 42.72 42.72 0 019.26 1 46.5 46.5 0 018.22 2.58 40 40 0 017 3.84 44.39 44.39 0 015.71 4.63l1.22-9.47h17.35v85.83h-17.35l-1.17-9.42a42.54 42.54 0 01-5.84 4.67 43.11 43.11 0 01-7 3.79 44.86 44.86 0 01-8.17 2.59 43 43 0 01-9.22 1A47.94 47.94 0 01359 119.9a43.3 43.3 0 01-14.47-9.71 44.17 44.17 0 01-9.34-14.47 47 47 0 01-3.3-17.72zm20.27-.08a29.16 29.16 0 002.17 11.34 27 27 0 005.92 8.88 26.69 26.69 0 008.76 5.76 29.19 29.19 0 0021.44 0 26.11 26.11 0 008.72-5.76 27.57 27.57 0 005.88-8.84 29 29 0 002.16-11.38 28.62 28.62 0 00-2.16-11.22 26.57 26.57 0 00-5.93-8.8 27.68 27.68 0 00-19.51-7.9 28.29 28.29 0 00-10.77 2.05 26.19 26.19 0 00-8.71 5.75 27.08 27.08 0 00-5.84 8.8 28.94 28.94 0 00-2.13 11.31zm-194.97-30.5h19.78v73.54h-19.78zm49.25 0h19.78v73.54h-19.78z"></path><circle cx="216.33" cy="21.4" r="12.28"></circle></svg></a></div><div class="style-fv3lde"><form action="/search" method="get" role="search" aria-label="Search" class="style-68a7fl"><span class="material-symbols-outlined style-18lpml7" aria-hidden="true">search</span><input type="search" autoComplete="off" placeholder="Search" name="q" required="" class="style-1gmi769" value=""/></form><button class="style-17ja8a3"><span class="material-symbols-outlined style-v2p563" aria-hidden="true">search</span><span class="style-1afofdy">Search</span></button><a href="/login?callback_action=login_or_signup&redirect_to=%2Fohtsuka1317%2Fitems%2F4519bc2d08899ddf6a83&realm=qiita" rel="nofollow" class="style-1sn73cs">Login</a><a href="/signup?callback_action=login_or_signup&redirect_to=%2Fohtsuka1317%2Fitems%2F4519bc2d08899ddf6a83&realm=qiita" rel="nofollow" class="style-1r635es">Signup</a></div></div><form action="/search" method="get" role="search" aria-label="Search" class="style-o5vjsc"><span class="material-symbols-outlined style-18lpml7" aria-hidden="true">search</span><input type="text" autoComplete="off" placeholder="Search" name="q" required="" class="style-1gmi769" value=""/></form></header><nav aria-label="Global" class="style-1l4w6pd"><ol class="style-1736035"><li><a href="/" class="style-1ygoan4">Trend</a></li><li><a href="/question-feed" class="style-1ygoan4">Question</a></li><li><a href="/official-campaigns/conference/2025?utm_source=qiita&utm_medium=referral&utm_campaign=global_navigation" class="style-1ygoan4"><svg class="style-1qkvt8e" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" width="15" height="15"><path d="M4.38196 0.5C3.18719 0.5 2.09149 0.990204 1.30469 1.77803C0.517886 2.56586 0.0283203 3.66298 0.0283203 4.85931C0.0283203 6.02646 0.482917 7.11775 1.30469 7.94643C2.12646 8.76927 3.22216 9.22446 4.38196 9.22446C4.83073 9.22446 5.27367 9.15443 5.70495 9.0202C6.21783 8.8568 6.77734 8.90349 7.25525 9.16026C7.65739 9.38202 8.16444 9.30032 8.49082 8.97935C8.81719 8.65839 8.89296 8.14484 8.67149 7.74217C8.41505 7.26364 8.36843 6.70341 8.53161 6.18986C8.67149 5.76385 8.7356 5.3145 8.7356 4.86515C8.7356 3.69799 8.281 2.60671 7.45923 1.78387C6.63746 0.955189 5.54759 0.5 4.38196 0.5Z" fill="#55C500"></path><path d="M10.5256 5.74638C9.97772 5.62966 9.4357 5.97981 9.31914 6.52837C9.20258 7.07693 9.55227 7.61965 10.1001 7.73637C11.1958 7.9698 11.9884 8.95021 11.9884 10.0707C11.9884 10.7359 11.7203 11.3312 11.2891 11.763C10.8578 12.1949 10.2633 12.4633 9.59889 12.4633C8.47988 12.4633 7.49492 11.6697 7.26763 10.5725C7.15106 10.024 6.60904 9.67384 6.0612 9.79056C5.51335 9.90727 5.16366 10.45 5.28022 10.9986C5.71151 13.0294 7.52989 14.5 9.60472 14.5C10.8228 14.5 11.9302 14.004 12.7286 13.1986C13.5271 12.3933 14.0283 11.2903 14.0283 10.0707C14.0283 7.99314 12.5538 6.17239 10.5314 5.74054L10.5256 5.74638Z" fill="var(--color-highEmphasis)"></path></svg>Qiita Conference</a></li><li><a href="/official-events" class="style-1ygoan4">Official Event</a></li><li><a href="/official-columns" target="_blank" class="style-1ygoan4">Official Column<span class="material-symbols-outlined style-1o3zxqp" aria-hidden="true">open_in_new</span></a></li><li><a href="/organizations" class="style-1ygoan4">Organization</a></li></ol></nav></div></div> <script type="application/json" class="js-react-on-rails-component" data-component-name="GlobalHeader" data-dom-id="GlobalHeader-react-component-672efe6b-497f-4e91-be2b-c3cd5e4c0e73">{"isHideGlobalNavigation":false}</script> <div id="AlertMessage-react-component-e51dad51-e6d9-40ff-b5ed-e4c0cafc9099"></div> <script type="application/json" class="js-react-on-rails-component" data-component-name="AlertMessage" data-dom-id="AlertMessage-react-component-e51dad51-e6d9-40ff-b5ed-e4c0cafc9099">{"isShowTfaDownloadAlert":null}</script> <div class="mainWrapper"><script type="application/ld+json">{"@context":"http://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/","name":"Qiita"}},{"@type":"ListItem","position":2,"item":{"@id":"/tags/draw.io","name":"Draw.io"}}]}</script><script type="application/ld+json">{"@context":"http://schema.org","@type":"Article","datePublished":"2020-05-18T00:18:36.000+09:00","dateModified":"2020-05-18T00:18:36.000+09:00","headline":"draw.io (diagrams.net) の細かいテクニック","image":"https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGNDMzNTUlMkZwcm9maWxlLWltYWdlcyUyRjE0NzM2ODk1MDI_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmZtPXBuZzMyJnM9NzFlNDMyYzdiZDY0ZTQyMzM5YjdkMjE0NDY0YjNkMGM%26blend-x%3D120%26blend-y%3D467%26blend-w%3D82%26blend-h%3D82%26blend-mode%3Dnormal%26s%3Dc865584714b348038d06107e39c5c76e?ixlib=rb-4.0.0\u0026w=1200\u0026fm=jpg\u0026mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9ZHJhdy5pbyUyMCUyOGRpYWdyYW1zLm5ldCUyOSUyMCVFMyU4MSVBRSVFNyVCNCVCMCVFMyU4MSU4QiVFMyU4MSU4NCVFMyU4MyU4NiVFMyU4MiVBRiVFMyU4MyU4QiVFMyU4MyU4MyVFMyU4MiVBRiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1wYWQ9MCZzPWI0Njk2ZmU1YWVhMjNlMDM3NTU4NmRmODE1MzQ5NGUz\u0026mark-x=120\u0026mark-y=112\u0026blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBvaHRzdWthMTMxNyZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1wYWQ9MCZzPTcyMTRiNzA0OWJhYTQ3ZDkyM2ZkMDU0ZGY5MzEwMDUy\u0026blend-x=242\u0026blend-y=480\u0026blend-w=838\u0026blend-h=46\u0026blend-fit=crop\u0026blend-crop=left%2Cbottom\u0026blend-mode=normal\u0026s=bf27011a1b8e9a24e961580681d1af3c","mainEntityOfPage":"https://qiita.com/ohtsuka1317/items/4519bc2d08899ddf6a83","author":{"@type":"Person","address":"Tokyo, Japan","email":null,"identifier":"ohtsuka1317","name":"ohtsuka1317","image":"https://qiita-user-profile-images.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F43355%2Fprofile-images%2F1473689502?ixlib=rb-4.0.0\u0026auto=compress%2Cformat\u0026lossless=0\u0026w=75\u0026s=474c79d59dda5de4866a14dc536fb0e7","url":"https://qiita.com/ohtsuka1317","description":"","memberOf":[]},"publisher":{"@type":"Organization","name":"Qiita","logo":{"@type":"ImageObject","url":"https://cdn.qiita.com/assets/public/qiita-logo-c39ded593afa388e2e1ba435b110554e.png"}}}</script><style type="text/css">html { scroll-behavior: smooth; }</style><script type="application/json" id="js-react-on-rails-context">{"railsEnv":"production","inMailer":false,"i18nLocale":"en","i18nDefaultLocale":"en","rorVersion":"13.4.0","rorPro":false,"href":"https://qiita.com/ohtsuka1317/items/4519bc2d08899ddf6a83","location":"/ohtsuka1317/items/4519bc2d08899ddf6a83","scheme":"https","host":"qiita.com","port":null,"pathname":"/ohtsuka1317/items/4519bc2d08899ddf6a83","search":null,"httpAcceptLanguage":null,"actionPath":"public/items#show","settings":{"analyticsTrackingId":"G-KEVS5DBRVN","tagManagerId":"GTM-W9W5TX4","assetsMap":{},"csrfToken":"Uvfgw3OgOrXBBC7Jgtjcd1pwLuduRke7G77iaoItzy-GJ-0Ih36jM84NWgnnoF5FNQX1Hkoaw7x6-1bL9xW8IQ","locale":"en","pushOne":{"accessToken":"4bc4bb057a0601d388a7b9e499ca2307e9eb4fc172804e310c59e511d7cac356","dialogImageUrl":"//cdn.qiita.com/assets/public/push_notification/image-qiitan-572179a3bbde375850422ea48b2b6272.png"},"textlint":{"workerUrl":"//cdn.qiita.com/assets/public/textlint-worker-df6cd413fd29efd2848dc1e48bd3f170.min.js"},"datetimeParam":null},"currentUser":null,"isLoggedIn":false,"isQiitaConference2025BeingHeld":true,"isQiitaConference2025Closed":false,"isQiitaConference2025Registration":true,"isQiitaConference2025Published":true,"recaptchaSiteKey":"6LdDE6gpAAAAANCGOJu9_xiI5Z-txJxHCz8uBP8Y","errorIconPath":"//cdn.qiita.com/assets/icons/large/missing-profile-image-828ed5829a93fbb35746a6c0f7c8107e.png","additionalParams":{"query_parameters":{},"path_parameters":{"controller":"public/items","action":"show","user_id":"ohtsuka1317","type":"items","id":"4519bc2d08899ddf6a83"},"request_id":"fdc462d1-bcf3-4e02-ac98-5bd93b1ad0cc","user_id":null},"realms":[{"humanName":"Qiita","isCurrentRealm":true,"isQiita":true,"isQiitaTeam":false,"loggedInUser":null,"teamId":null,"url":"https://qiita.com/"}],"adventCalendar":{"currentMonth":3,"isAdventCalendarBeingHeld":false,"isCalendarCreatable":false,"isLatestHeldYear":true,"isPreRegistering":false,"isRankingBeingHeld":false,"isSubscribable":false,"year":2024,"years":[2024,2023,2022,2021,2020,2019,2018,2017,2016,2015,2014,2013,2012,2011]},"serverSide":false}</script> <div id="PersonalArticlePage-react-component-47c937ff-59ba-4c69-9ae0-72cf1f5d59a7"><main class=" style-ffh7zq"><section class="style-1hl01qi"><div class="style-c1wjhj"><div class="style-1duml6f"><svg width="64" height="64" viewBox="0 0 64 64" class="style-ftns26"><circle cx="32" cy="32" r="19" class="circle"></circle><path fill-rule="evenodd" clip-rule="evenodd" d="M30.5865 41.1378C31.3272 41.8221 32.6722 41.8319 33.4129 41.1574L33.4718 41.1037C38.5554 36.4713 41.8819 33.4401 41.746 29.6619C41.6875 28.0001 40.8396 26.4068 39.4654 25.4684C37.3743 24.0305 34.8841 24.4462 33.1038 25.7333C32.6936 26.0299 32.321 26.3728 31.9997 26.75C31.6783 26.3727 31.3056 26.03 30.8952 25.7338C29.115 24.4491 26.625 24.0385 24.5341 25.4684C23.1599 26.4068 22.312 28.0001 22.2535 29.6619C22.1268 33.4546 25.4697 36.4947 30.5865 41.1378ZM23.7526 29.7133C23.7953 28.5111 24.4144 27.3665 25.38 26.7071L25.3808 26.7065C27.1492 25.4973 29.4926 26.12 30.8579 27.7227L31.543 28.527C31.7826 28.8082 32.2169 28.8082 32.4565 28.527L33.1416 27.7227C34.5102 26.1161 36.8515 25.4914 38.6155 26.7044L38.6195 26.7071C39.5855 27.3667 40.2046 28.512 40.2469 29.7146L40.247 29.7158C40.2969 31.1036 39.73 32.4647 38.3804 34.1435C37.0091 35.8492 34.9938 37.6874 32.403 40.0483C32.3636 40.0842 32.2314 40.1587 32.0103 40.1572C31.7898 40.1556 31.6512 40.0792 31.6044 40.036L31.5995 40.0315L31.5945 40.027C29.0048 37.677 26.9919 35.8432 25.6225 34.1408C24.2752 32.4657 23.7066 31.1034 23.7526 29.7133Z" class="heart-stroke"></path><path d="M33.4129 41.1574C32.6722 41.8319 31.3272 41.8221 30.5865 41.1378C25.4697 36.4947 22.1268 33.4546 22.2535 29.6619C22.312 28.0001 23.1599 26.4068 24.5341 25.4684C27.1071 23.7089 30.2844 24.7363 31.9997 26.75C33.7151 24.7363 36.8924 23.6991 39.4654 25.4684C40.8396 26.4068 41.6875 28.0001 41.746 29.6619C41.8824 33.4546 38.5297 36.4947 33.4129 41.1574Z" class="heart-fill"></path><g class="particles" style="--rotate:30deg"><circle cx="29" cy="19" r="3" fill="var(--color-yellow60)" class="particle" style="--x:26;--y:7;--duration:150ms"></circle><circle cx="35" cy="23" r="2" fill="var(--color-blue60)" class="particle" style="--x:37;--y:10;--duration:200ms"></circle></g><g class="particles" style="--rotate:102deg"><circle cx="29" cy="19" r="3" fill="var(--color-yellow60)" class="particle" style="--x:26;--y:7;--duration:150ms"></circle><circle cx="35" cy="23" r="2" fill="var(--color-blue60)" class="particle" style="--x:37;--y:10;--duration:200ms"></circle></g><g class="particles" style="--rotate:174deg"><circle cx="29" cy="19" r="3" fill="var(--color-yellow60)" class="particle" style="--x:26;--y:7;--duration:150ms"></circle><circle cx="35" cy="23" r="2" fill="var(--color-blue60)" class="particle" style="--x:37;--y:10;--duration:200ms"></circle></g><g class="particles" style="--rotate:246deg"><circle cx="29" cy="19" r="3" fill="var(--color-yellow60)" class="particle" style="--x:26;--y:7;--duration:150ms"></circle><circle cx="35" cy="23" r="2" fill="var(--color-blue60)" class="particle" style="--x:37;--y:10;--duration:200ms"></circle></g><g class="particles" style="--rotate:318deg"><circle cx="29" cy="19" r="3" fill="var(--color-yellow60)" class="particle" style="--x:26;--y:7;--duration:150ms"></circle><circle cx="35" cy="23" r="2" fill="var(--color-blue60)" class="particle" style="--x:37;--y:10;--duration:200ms"></circle></g></svg><button aria-label="Like" aria-pressed="false" title="Like" class="style-10ttvi6"></button></div><div class="style-wknrvb"><div class="style-3fim88"><a href="/ohtsuka1317/items/4519bc2d08899ddf6a83/likers" aria-label="116Likes" aria-describedby="like-tooltip" class="style-1a6dkvp">116</a><p role="tooltip" id="like-tooltip" aria-hidden="false" class="style-16g96ve">Go to list of users who liked</p></div></div></div><div class="style-1bc9a2c"><button aria-haspopup="dialog" aria-expanded="false" aria-controls="ButtonBAhJIhRBcnRpY2xlLTEyMjU0OTQGOgZFRg==--89011109315fe63b0bd150bfce9309175c3cd45a9148c771131049a1d81d732e" aria-label="Stock" class="style-1xwfn2v" type="button"><svg class="style-100tu0r" height="32" viewBox="0 0 32 32" width="32" aria-hidden="true"><path d="M6.5 5H25.5C25.7761 5 26 5.22386 26 5.5V6.5C26 6.77614 25.7761 7 25.5 7H6.5C6.22386 7 6 6.77614 6 6.5V5.5C6 5.22386 6.22386 5 6.5 5ZM24 19V11.5C24 11.3674 23.9473 11.2402 23.8536 11.1464C23.7598 11.0527 23.6326 11 23.5 11H8.5C8.36739 11 8.24021 11.0527 8.14645 11.1464C8.05268 11.2402 8 11.3674 8 11.5V19C8 20.8565 8.7375 22.637 10.0503 23.9497C11.363 25.2625 13.1435 26 15 26H17C18.8565 26 20.637 25.2625 21.9497 23.9497C23.2625 22.637 24 20.8565 24 19ZM6.58579 9.58579C6.96086 9.21071 7.46957 9 8 9H24C24.5304 9 25.0391 9.21071 25.4142 9.58579C25.7893 9.96086 26 10.4696 26 11V19C26 21.3869 25.0518 23.6761 23.364 25.364C21.6761 27.0518 19.3869 28 17 28H15C12.6131 28 10.3239 27.0518 8.63604 25.364C6.94821 23.6761 6 21.3869 6 19V11C6 10.4696 6.21071 9.96086 6.58579 9.58579Z"></path></svg></button><span class="style-1vem4tk">103</span></div><button aria-label="Share on X(Twitter)" title="Post" class="style-1n9ulpr" type="button"><svg class="style-1b1cd5z" viewBox="0 0 20 20"><path d="m11.68 8.62 6.55-7.62h-1.55l-5.69 6.62-4.55-6.62h-5.25l6.88 10.01-6.88 7.99h1.55l6.01-6.99 4.8 6.99h5.24l-7.13-10.38zm-2.13 2.47-.7-1-5.54-7.92h2.39l4.47 6.4.7 1 5.82 8.32h-2.39l-4.75-6.79z"></path></svg></button><button aria-label="Share on facebook" title="Share on Facebook" class="style-1n9ulpr" type="button"><svg class="style-157xj1g" height="20" viewBox="0 0 20 20" width="20"><path d="m20 10c0-5.52-4.48-10-10-10s-10 4.48-10 10c0 4.99 3.66 9.13 8.44 9.88v-6.99h-2.54v-2.89h2.54v-2.2c0-2.51 1.49-3.89 3.78-3.89 1.09 0 2.24.2 2.24.2v2.46h-1.26c-1.24 0-1.63.77-1.63 1.56v1.88h2.77l-.44 2.89h-2.33v6.99c4.78-.75 8.44-4.89 8.44-9.88z"></path><path d="m13.89 12.89.44-2.89h-2.77v-1.88c0-.79.39-1.56 1.63-1.56h1.26v-2.46s-1.14-.2-2.24-.2c-2.28 0-3.78 1.38-3.78 3.89v2.2h-2.54v2.89h2.54v6.99c.51.08 1.03.12 1.56.12s1.05-.04 1.56-.12v-6.99h2.33z" fill="#ffffff"></path></svg></button><a class="style-1o9h1hg" href="https://b.hatena.ne.jp/entry/s/qiita.com/ohtsuka1317/items/4519bc2d08899ddf6a83" rel="noopener noreferrer" target="_blank" title="Hatena Bookmark"><svg class="style-1uu7u3w" viewBox="0 0 20 20"><rect height="18" rx="3.67" width="18" x="1" y="1" fill="#1d9bf0"></rect><g fill="#ffffff"><path d="m11.01 10.29c-.33-.36-.78-.57-1.36-.61.52-.14.89-.35 1.13-.62s.35-.64.35-1.11c0-.37-.08-.69-.24-.97s-.39-.5-.69-.67c-.26-.15-.58-.25-.94-.31-.37-.06-1.01-.09-1.93-.09h-2.24v8.18h2.31c.93 0 1.6-.03 2.01-.09s.75-.17 1.03-.32c.34-.18.61-.44.79-.77s.28-.72.28-1.15c0-.61-.16-1.09-.49-1.46zm-3.85-2.57h.48c.55 0 .93.06 1.12.19s.29.34.29.65-.1.5-.31.63c-.21.12-.58.18-1.13.18h-.45v-1.64zm1.9 4.69c-.22.13-.59.2-1.12.2h-.78v-1.79h.81c.54 0 .91.07 1.11.2.2.14.3.38.3.72 0 .31-.11.53-.33.66z"></path><path d="m13.87 12.02c-.57 0-1.04.46-1.04 1.04s.46 1.04 1.04 1.04 1.04-.46 1.04-1.04-.46-1.04-1.04-1.04z"></path><path d="m12.97 5.91h1.8v5.45h-1.8z"></path></g></svg></a><div class="style-79elbk"><button aria-haspopup="menu" aria-expanded="false" aria-controls="ArticleStickyMenuDropdown" class="style-1vr7y3r" aria-label="Open options" type="button"><span class="material-symbols-outlined style-v2p563" aria-hidden="true">more_horiz</span></button><dialog aria-modal="true" aria-labelledby="ArticleDeleteConfirmationModal-label" class="style-oi42s2"><div class="style-2aaf4j"><div class="style-bxc62b"><p id="ArticleDeleteConfirmationModal-label" class="style-1snuvpu">Delete article</p><button type="button" aria-label="" class="style-o8tyjw"><span class="material-symbols-outlined style-v2p563" aria-hidden="true">close</span></button></div><div class="style-6vdptm"><p>Deleted articles cannot be recovered.</p><p>Draft of this article would be also deleted.</p><p>Are you sure you want to delete this article?</p></div><div class="style-111ab2g"><button font-size="16" type="button" class="style-hreeih">Cancel</button><button font-size="16" type="button" class="style-y54waz">Delete<span class="material-symbols-outlined is-fill style-1jvcm2e" aria-hidden="true">delete</span></button></div></div></dialog></div></section><div class="p-items_options"><aside><div class="style-1hbd3g7"></div></aside><div class="p-items_toc"><aside><div class="style-1hbd3g7"></div></aside></div></div><div class="p-items_main"><article class="style-itrjxe"><div class="style-1cpeld6"><span class="material-symbols-outlined is-fill style-1l7bzw8" aria-hidden="true">info</span><p>More than 3 years have passed since last update.</p></div><div class="style-8qb8m4"><div class="style-1yndj8s"></div><div data-logly-image="true" class="style-i43zkt"><div class="style-17gh4w8"><a href="/ohtsuka1317" class="style-mavs84"><div class="style-kcbbwa"><img height="24" loading="lazy" src="https://qiita-user-profile-images.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F43355%2Fprofile-images%2F1473689502?ixlib=rb-4.0.0&auto=compress%2Cformat&lossless=0&w=48&s=dea7c5fd5b4364160f27b2fad85a8c35" width="24" class="style-1wqqt93"/></div>@ohtsuka1317</a></div></div><h1 data-logly-title="true" class="style-wo2a1i">draw.io (diagrams.net) の細かいテクニック</h1><ul class="style-28f073"><li><a href="/tags/draw.io" class="style-mp1hhj">Draw.io</a></li></ul><div class="style-1npej5s"><span class="style-3k9iaf">Posted at <time dateTime="2020-05-17T15:18:36Z">2020-05-17</time></span></div></div><section class="it-MdContent"><div id="personal-public-article-body"><div class="mdContent-inner"><p data-sourcepos="1:1-1:78">みんな大好き draw.io (diagrams.net) の細かいテクニックです。</p> <p data-sourcepos="3:1-3:274">ちなみに、2020年2月あたりから、<a href="https://www.diagrams.net/blog/move-diagrams-net" rel="nofollow noopener" target="_blank">セキュリティ上の理由でサイトのドメインを diagrams.net に名称変更し始めている</a>ので、アクセス先はこちらに変更したりしましょう。</p> <h2 data-sourcepos="5:1-5:42"> <span id="非圧縮xml形式のデフォルト化" class="fragment"></span><a href="#%E9%9D%9E%E5%9C%A7%E7%B8%AExml%E5%BD%A2%E5%BC%8F%E3%81%AE%E3%83%87%E3%83%95%E3%82%A9%E3%83%AB%E3%83%88%E5%8C%96"><i class="fa fa-link"></i></a>非圧縮XML形式のデフォルト化</h2> <p data-sourcepos="7:1-7:192">ダイアグラムをファイル保存すると、デフォルトでは圧縮されたXMLになっていますが、これだと差分の確認・バージョン管理がしづらいです。</p> <p data-sourcepos="9:1-9:297">メニューの「拡張 (Extras)」->「圧縮 (Compressed)」のチェックを外すと非圧縮形式になるので、新しいファイルを作るたびにこれを実行しても良いのですが、忘れないように非圧縮XML形式をデフォルトにすると良いでしょう。</p> <p data-sourcepos="11:1-11:196">メニューの拡張 (Extras) -> Configuration で開く設定ダイアログに以下を記載すると、アプリの再読み込み以降は非圧縮形式がデフォルトになります。</p> <div class="code-frame" data-lang="json" data-sourcepos="13:1-17:3"><div class="highlight"><pre><code><span class="p">{</span><span class="w"> </span><span class="nl">"compressXml"</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w"> </span><span class="p">}</span><span class="w"> </span></code></pre></div></div> <h2 data-sourcepos="19:1-19:45"> <span id="コンテナ化子のリサイズ防止" class="fragment"></span><a href="#%E3%82%B3%E3%83%B3%E3%83%86%E3%83%8A%E5%8C%96%E5%AD%90%E3%81%AE%E3%83%AA%E3%82%B5%E3%82%A4%E3%82%BA%E9%98%B2%E6%AD%A2"><i class="fa fa-link"></i></a>コンテナ化、子のリサイズ防止</h2> <p data-sourcepos="21:1-21:171">ある図形の中に他の図形を配置しても、それぞれの図形は独立していて、親図形を移動させたりしても子図形は移動しません。</p> <p data-sourcepos="23:1-23:326">これを一体化して扱うために図形を「グループ化」する、というのは、Microsoft Office などでもお馴染みの手段ですが、この場合は完全に一つの図形になってしまうため、親をサイズ変更したりすると子も同じようにサイズ変更されたりします。</p> <p data-sourcepos="25:1-25:225">これが便利な場合もありますが、やっぱりそこは独立して扱いたいよね、という場合、親を「コンテナ」にして一緒に扱う手段があります。以下のように設定します。</p> <ol data-sourcepos="27:1-31:0"> <li data-sourcepos="27:1-27:81">親図形のフォーマットパネルの「スタイル」タブを開く。</li> <li data-sourcepos="28:1-28:64">Property を開き、Container にチェックを入れる。</li> <li data-sourcepos="29:1-29:46">Resize Children のチェックを外す。</li> <li data-sourcepos="30:1-31:0">お好みで、Collapsible のチェックを外す。（チェックしていると図形を折りたためるようになりますが、図形の左上に折りたたみ用のボタンが出てしまいます）</li> </ol> <p data-sourcepos="32:1-32:258">コンテナ化された図形の中に、子にしたい図形をドラッグ＆ドロップすると、親子関係ができます。この状態で親だけ移動すれば、グループ化した場合と同じように子も一緒に移動できます。</p> <p data-sourcepos="34:1-34:153">一方で、Resize Children（子をリサイズする）の無効化により、親をリサイズしても子はリサイズされなくなります。</p> <p data-sourcepos="36:1-36:128"><a href="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F43355%2Ffa215f53-e909-0e09-836e-4751679a02f4.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=441f3122feb6611934dd26aac7a4f8e5" target="_blank" rel="nofollow noopener"><img src="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F43355%2Ffa215f53-e909-0e09-836e-4751679a02f4.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=441f3122feb6611934dd26aac7a4f8e5" alt="Container example" srcset="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F43355%2Ffa215f53-e909-0e09-836e-4751679a02f4.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&w=1400&fit=max&s=67ed1f32b3665eaf7eaf9874a83c4bb4 1x" data-canonical-src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43355/fa215f53-e909-0e09-836e-4751679a02f4.gif" loading="lazy"></a></p> <h2 data-sourcepos="39:1-39:24"> <span id="プレースホルダ" class="fragment"></span><a href="#%E3%83%97%E3%83%AC%E3%83%BC%E3%82%B9%E3%83%9B%E3%83%AB%E3%83%80"><i class="fa fa-link"></i></a>プレースホルダ</h2> <p data-sourcepos="41:1-41:96">親図形やダイアグラム自体に設定したメタデータを参照する機能です。</p> <ol data-sourcepos="43:1-47:0"> <li data-sourcepos="43:1-43:60">上の手順で、親図形をコンテナ化します。</li> <li data-sourcepos="44:1-44:116">親図形の「データを編集 (Edit Data)」メニューから、適当なIDでデータを追加します。</li> <li data-sourcepos="45:1-45:120">子図形の「データを編集」メニューで、「所有者 (Placeholders)」にチェックを入れます。</li> <li data-sourcepos="46:1-47:0">子図形のラベルで、<code>%データID%</code> という形式（親に定義したデータのIDを <code>%</code> で挟む）の文字列が、親で定義したデータの内容に置換されるようになります。</li> </ol> <p data-sourcepos="48:1-48:130"><a href="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F43355%2F130c2857-3ac6-7443-d9b8-ac8e08fc3b25.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=4a6b35328d40c9ca8873a4cc59f126c7" target="_blank" rel="nofollow noopener"><img src="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F43355%2F130c2857-3ac6-7443-d9b8-ac8e08fc3b25.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=4a6b35328d40c9ca8873a4cc59f126c7" alt="Placeholder example" srcset="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F43355%2F130c2857-3ac6-7443-d9b8-ac8e08fc3b25.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&w=1400&fit=max&s=fda074d908f8a845e5e6c46f7f50a8b0 1x" data-canonical-src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43355/130c2857-3ac6-7443-d9b8-ac8e08fc3b25.gif" loading="lazy"></a></p> <h2 data-sourcepos="51:1-51:19"> <span id="lineジャンプ" class="fragment"></span><a href="#line%E3%82%B8%E3%83%A3%E3%83%B3%E3%83%97"><i class="fa fa-link"></i></a>Lineジャンプ</h2> <p data-sourcepos="53:1-53:129">線と線が交差するときに、Visio などのように線を「またがせて」見やすくすることができます。</p> <a href="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F43355%2F81787193-a91f-1324-065d-677e450bff66.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=d398db3fccff4bd2f6c42800adec4b20" target="_blank" rel="nofollow noopener"><img width="265" alt="Line Jump example" src="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F43355%2F81787193-a91f-1324-065d-677e450bff66.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=d398db3fccff4bd2f6c42800adec4b20" srcset="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F43355%2F81787193-a91f-1324-065d-677e450bff66.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&w=1400&fit=max&s=8c67e92822ecb0ec8400ee59c57e0aa6 1x" data-canonical-src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43355/81787193-a91f-1324-065d-677e450bff66.png" loading="lazy"></a> <p data-sourcepos="57:1-57:198">これは、前面にある方の線のスタイルで「Lineジャンプ (Line jumps)」を「なし (None)」以外に設定すれば有効にできます。上は「円弧 (Arc)」の例です。</p> <h2 data-sourcepos="60:1-60:9"> <span id="数式" class="fragment"></span><a href="#%E6%95%B0%E5%BC%8F"><i class="fa fa-link"></i></a>数式</h2> <p data-sourcepos="62:1-62:191">メニューの「拡張 (Extras)」-> 「数式組版 (Mathematical Typesetting)」を有効にすると、AsciiMath形式もしくはLaTeX形式で入力した数式を表示できます。</p> <ul data-sourcepos="64:1-66:0"> <li data-sourcepos="64:1-64:52">AsciiMath: 数式をバッククオートで囲む</li> <li data-sourcepos="65:1-66:0">LaTeX: 数式を <code>$$</code> で囲む、もしくは <code>$</code> と <code>$</code> で囲む</li> </ul> <p data-sourcepos="67:1-67:143"><a href="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F43355%2F822df3a8-133c-930b-f378-2a92cb43fb7d.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=5d13d894eb38abc2aaff42bd639f9f48" target="_blank" rel="nofollow noopener"><img src="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F43355%2F822df3a8-133c-930b-f378-2a92cb43fb7d.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=5d13d894eb38abc2aaff42bd639f9f48" alt="Mathematical Typesetting example" srcset="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F43355%2F822df3a8-133c-930b-f378-2a92cb43fb7d.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&w=1400&fit=max&s=ff92c6fd64a2daa49cd66b0901f3a522 1x" data-canonical-src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43355/822df3a8-133c-930b-f378-2a92cb43fb7d.gif" loading="lazy"></a></p> <p data-sourcepos="70:1-70:48">詳しくは公式のFAQを参照ください。</p> <p data-sourcepos="72:1-72:96"><iframe id="qiita-embed-content__979afe09ec9acfe896c3eb2f2503650b" src="https://qiita.com/embed-contents/link-card#qiita-embed-content__979afe09ec9acfe896c3eb2f2503650b" data-content="https%3A%2F%2Fdesk.draw.io%2Fsupport%2Fsolutions%2Farticles%2F16000032875-how-to-use-mathematical-typesetting-" frameborder="0" scrolling="no" loading="lazy" style="width:100%;" height="29"> </iframe> </p> </div></div></section><div class="style-1r3vbu3"><div class="style-gg4vpm"><div class="style-1f18zs1"><div class="style-aaiy04"><div class="style-1duml6f"><svg width="64" height="64" viewBox="0 0 64 64" class="style-ftns26"><circle cx="32" cy="32" r="19" class="circle"></circle><path fill-rule="evenodd" clip-rule="evenodd" d="M30.5865 41.1378C31.3272 41.8221 32.6722 41.8319 33.4129 41.1574L33.4718 41.1037C38.5554 36.4713 41.8819 33.4401 41.746 29.6619C41.6875 28.0001 40.8396 26.4068 39.4654 25.4684C37.3743 24.0305 34.8841 24.4462 33.1038 25.7333C32.6936 26.0299 32.321 26.3728 31.9997 26.75C31.6783 26.3727 31.3056 26.03 30.8952 25.7338C29.115 24.4491 26.625 24.0385 24.5341 25.4684C23.1599 26.4068 22.312 28.0001 22.2535 29.6619C22.1268 33.4546 25.4697 36.4947 30.5865 41.1378ZM23.7526 29.7133C23.7953 28.5111 24.4144 27.3665 25.38 26.7071L25.3808 26.7065C27.1492 25.4973 29.4926 26.12 30.8579 27.7227L31.543 28.527C31.7826 28.8082 32.2169 28.8082 32.4565 28.527L33.1416 27.7227C34.5102 26.1161 36.8515 25.4914 38.6155 26.7044L38.6195 26.7071C39.5855 27.3667 40.2046 28.512 40.2469 29.7146L40.247 29.7158C40.2969 31.1036 39.73 32.4647 38.3804 34.1435C37.0091 35.8492 34.9938 37.6874 32.403 40.0483C32.3636 40.0842 32.2314 40.1587 32.0103 40.1572C31.7898 40.1556 31.6512 40.0792 31.6044 40.036L31.5995 40.0315L31.5945 40.027C29.0048 37.677 26.9919 35.8432 25.6225 34.1408C24.2752 32.4657 23.7066 31.1034 23.7526 29.7133Z" class="heart-stroke"></path><path d="M33.4129 41.1574C32.6722 41.8319 31.3272 41.8221 30.5865 41.1378C25.4697 36.4947 22.1268 33.4546 22.2535 29.6619C22.312 28.0001 23.1599 26.4068 24.5341 25.4684C27.1071 23.7089 30.2844 24.7363 31.9997 26.75C33.7151 24.7363 36.8924 23.6991 39.4654 25.4684C40.8396 26.4068 41.6875 28.0001 41.746 29.6619C41.8824 33.4546 38.5297 36.4947 33.4129 41.1574Z" class="heart-fill"></path><g class="particles" style="--rotate:30deg"><circle cx="29" cy="19" r="3" fill="var(--color-yellow60)" class="particle" style="--x:26;--y:7;--duration:150ms"></circle><circle cx="35" cy="23" r="2" fill="var(--color-blue60)" class="particle" style="--x:37;--y:10;--duration:200ms"></circle></g><g class="particles" style="--rotate:102deg"><circle cx="29" cy="19" r="3" fill="var(--color-yellow60)" class="particle" style="--x:26;--y:7;--duration:150ms"></circle><circle cx="35" cy="23" r="2" fill="var(--color-blue60)" class="particle" style="--x:37;--y:10;--duration:200ms"></circle></g><g class="particles" style="--rotate:174deg"><circle cx="29" cy="19" r="3" fill="var(--color-yellow60)" class="particle" style="--x:26;--y:7;--duration:150ms"></circle><circle cx="35" cy="23" r="2" fill="var(--color-blue60)" class="particle" style="--x:37;--y:10;--duration:200ms"></circle></g><g class="particles" style="--rotate:246deg"><circle cx="29" cy="19" r="3" fill="var(--color-yellow60)" class="particle" style="--x:26;--y:7;--duration:150ms"></circle><circle cx="35" cy="23" r="2" fill="var(--color-blue60)" class="particle" style="--x:37;--y:10;--duration:200ms"></circle></g><g class="particles" style="--rotate:318deg"><circle cx="29" cy="19" r="3" fill="var(--color-yellow60)" class="particle" style="--x:26;--y:7;--duration:150ms"></circle><circle cx="35" cy="23" r="2" fill="var(--color-blue60)" class="particle" style="--x:37;--y:10;--duration:200ms"></circle></g></svg><button aria-label="Like" aria-pressed="false" title="Like" class="style-10ttvi6"></button></div><div class="style-buogjo"><div class="style-3fim88"><a href="/ohtsuka1317/items/4519bc2d08899ddf6a83/likers" aria-label="116Likes" aria-describedby="like-tooltip" class="style-1a6dkvp">116</a><p role="tooltip" id="like-tooltip" aria-hidden="false" class="style-uw35c3">Go to list of users who liked</p></div></div></div><div class="style-izmm4j"><button aria-haspopup="dialog" aria-expanded="false" aria-controls="ButtonBAhJIhRBcnRpY2xlLTEyMjU0OTQGOgZFRg==--89011109315fe63b0bd150bfce9309175c3cd45a9148c771131049a1d81d732e" aria-label="Stock" class="style-1xwfn2v" type="button"><svg class="style-100tu0r" height="32" viewBox="0 0 32 32" width="32" aria-hidden="true"><path d="M6.5 5H25.5C25.7761 5 26 5.22386 26 5.5V6.5C26 6.77614 25.7761 7 25.5 7H6.5C6.22386 7 6 6.77614 6 6.5V5.5C6 5.22386 6.22386 5 6.5 5ZM24 19V11.5C24 11.3674 23.9473 11.2402 23.8536 11.1464C23.7598 11.0527 23.6326 11 23.5 11H8.5C8.36739 11 8.24021 11.0527 8.14645 11.1464C8.05268 11.2402 8 11.3674 8 11.5V19C8 20.8565 8.7375 22.637 10.0503 23.9497C11.363 25.2625 13.1435 26 15 26H17C18.8565 26 20.637 25.2625 21.9497 23.9497C23.2625 22.637 24 20.8565 24 19ZM6.58579 9.58579C6.96086 9.21071 7.46957 9 8 9H24C24.5304 9 25.0391 9.21071 25.4142 9.58579C25.7893 9.96086 26 10.4696 26 11V19C26 21.3869 25.0518 23.6761 23.364 25.364C21.6761 27.0518 19.3869 28 17 28H15C12.6131 28 10.3239 27.0518 8.63604 25.364C6.94821 23.6761 6 21.3869 6 19V11C6 10.4696 6.21071 9.96086 6.58579 9.58579Z"></path></svg></button><span class="style-1129w32">103</span></div><div class="style-3fim88"><a href="#comments" aria-label="0Comments" aria-describedby="comments-tooltip" class="style-tzv11m"><span class="material-symbols-outlined style-n5k90r" aria-hidden="true">comment</span>0</a><p role="tooltip" id="comments-tooltip" aria-hidden="false" class="style-uw35c3">Go to list of comments</p></div></div><div class="style-1f18zs1"></div></div></div><div class="style-rwy56f"><p class="style-1nyasl8">Register as a new user and use Qiita more conveniently</p><ol class="style-1i89dtz"><li>You get articles that match your needs</li><li>You can efficiently read back useful information</li><li>You can use dark theme</li></ol><a href="https://help.qiita.com/ja/articles/qiita-login-user" target="_blank" rel="noopener noreferrer" class="style-dzaums">What you can do with signing up</a><div class="style-geahq7"><a href="/signup?callback_action=login_or_signup&redirect_to=%2Fohtsuka1317%2Fitems%2F4519bc2d08899ddf6a83&realm=qiita" rel="nofollow" class="style-1dq3d3h">Sign up</a><a href="/login?callback_action=login_or_signup&redirect_to=%2Fohtsuka1317%2Fitems%2F4519bc2d08899ddf6a83&realm=qiita" rel="nofollow" class="style-tfrxbl">Login</a></div></div></article><div><aside class="style-itrjxe"></aside></div></div></main><div class="style-1395ble"><div class="style-5jpx49"><div class="style-aaiy04"><div class="style-1duml6f"><svg width="64" height="64" viewBox="0 0 64 64" class="style-ftns26"><circle cx="32" cy="32" r="19" class="circle"></circle><path fill-rule="evenodd" clip-rule="evenodd" d="M30.5865 41.1378C31.3272 41.8221 32.6722 41.8319 33.4129 41.1574L33.4718 41.1037C38.5554 36.4713 41.8819 33.4401 41.746 29.6619C41.6875 28.0001 40.8396 26.4068 39.4654 25.4684C37.3743 24.0305 34.8841 24.4462 33.1038 25.7333C32.6936 26.0299 32.321 26.3728 31.9997 26.75C31.6783 26.3727 31.3056 26.03 30.8952 25.7338C29.115 24.4491 26.625 24.0385 24.5341 25.4684C23.1599 26.4068 22.312 28.0001 22.2535 29.6619C22.1268 33.4546 25.4697 36.4947 30.5865 41.1378ZM23.7526 29.7133C23.7953 28.5111 24.4144 27.3665 25.38 26.7071L25.3808 26.7065C27.1492 25.4973 29.4926 26.12 30.8579 27.7227L31.543 28.527C31.7826 28.8082 32.2169 28.8082 32.4565 28.527L33.1416 27.7227C34.5102 26.1161 36.8515 25.4914 38.6155 26.7044L38.6195 26.7071C39.5855 27.3667 40.2046 28.512 40.2469 29.7146L40.247 29.7158C40.2969 31.1036 39.73 32.4647 38.3804 34.1435C37.0091 35.8492 34.9938 37.6874 32.403 40.0483C32.3636 40.0842 32.2314 40.1587 32.0103 40.1572C31.7898 40.1556 31.6512 40.0792 31.6044 40.036L31.5995 40.0315L31.5945 40.027C29.0048 37.677 26.9919 35.8432 25.6225 34.1408C24.2752 32.4657 23.7066 31.1034 23.7526 29.7133Z" class="heart-stroke"></path><path d="M33.4129 41.1574C32.6722 41.8319 31.3272 41.8221 30.5865 41.1378C25.4697 36.4947 22.1268 33.4546 22.2535 29.6619C22.312 28.0001 23.1599 26.4068 24.5341 25.4684C27.1071 23.7089 30.2844 24.7363 31.9997 26.75C33.7151 24.7363 36.8924 23.6991 39.4654 25.4684C40.8396 26.4068 41.6875 28.0001 41.746 29.6619C41.8824 33.4546 38.5297 36.4947 33.4129 41.1574Z" class="heart-fill"></path><g class="particles" style="--rotate:30deg"><circle cx="29" cy="19" r="3" fill="var(--color-yellow60)" class="particle" style="--x:26;--y:7;--duration:150ms"></circle><circle cx="35" cy="23" r="2" fill="var(--color-blue60)" class="particle" style="--x:37;--y:10;--duration:200ms"></circle></g><g class="particles" style="--rotate:102deg"><circle cx="29" cy="19" r="3" fill="var(--color-yellow60)" class="particle" style="--x:26;--y:7;--duration:150ms"></circle><circle cx="35" cy="23" r="2" fill="var(--color-blue60)" class="particle" style="--x:37;--y:10;--duration:200ms"></circle></g><g class="particles" style="--rotate:174deg"><circle cx="29" cy="19" r="3" fill="var(--color-yellow60)" class="particle" style="--x:26;--y:7;--duration:150ms"></circle><circle cx="35" cy="23" r="2" fill="var(--color-blue60)" class="particle" style="--x:37;--y:10;--duration:200ms"></circle></g><g class="particles" style="--rotate:246deg"><circle cx="29" cy="19" r="3" fill="var(--color-yellow60)" class="particle" style="--x:26;--y:7;--duration:150ms"></circle><circle cx="35" cy="23" r="2" fill="var(--color-blue60)" class="particle" style="--x:37;--y:10;--duration:200ms"></circle></g><g class="particles" style="--rotate:318deg"><circle cx="29" cy="19" r="3" fill="var(--color-yellow60)" class="particle" style="--x:26;--y:7;--duration:150ms"></circle><circle cx="35" cy="23" r="2" fill="var(--color-blue60)" class="particle" style="--x:37;--y:10;--duration:200ms"></circle></g></svg><button aria-label="Like" aria-pressed="false" title="Like" class="style-10ttvi6"></button></div><div class="style-wknrvb"><div class="style-3fim88"><a href="/ohtsuka1317/items/4519bc2d08899ddf6a83/likers" aria-label="116Likes" aria-describedby="like-tooltip" class="style-1a6dkvp">116</a><p role="tooltip" id="like-tooltip" aria-hidden="false" class="style-uw35c3">Go to list of users who liked</p></div></div></div><div class="style-izmm4j"><button aria-haspopup="dialog" aria-expanded="false" aria-controls="ButtonBAhJIhRBcnRpY2xlLTEyMjU0OTQGOgZFRg==--89011109315fe63b0bd150bfce9309175c3cd45a9148c771131049a1d81d732e" aria-label="Stock" class="style-1xwfn2v" type="button"><svg class="style-100tu0r" height="32" viewBox="0 0 32 32" width="32" aria-hidden="true"><path d="M6.5 5H25.5C25.7761 5 26 5.22386 26 5.5V6.5C26 6.77614 25.7761 7 25.5 7H6.5C6.22386 7 6 6.77614 6 6.5V5.5C6 5.22386 6.22386 5 6.5 5ZM24 19V11.5C24 11.3674 23.9473 11.2402 23.8536 11.1464C23.7598 11.0527 23.6326 11 23.5 11H8.5C8.36739 11 8.24021 11.0527 8.14645 11.1464C8.05268 11.2402 8 11.3674 8 11.5V19C8 20.8565 8.7375 22.637 10.0503 23.9497C11.363 25.2625 13.1435 26 15 26H17C18.8565 26 20.637 25.2625 21.9497 23.9497C23.2625 22.637 24 20.8565 24 19ZM6.58579 9.58579C6.96086 9.21071 7.46957 9 8 9H24C24.5304 9 25.0391 9.21071 25.4142 9.58579C25.7893 9.96086 26 10.4696 26 11V19C26 21.3869 25.0518 23.6761 23.364 25.364C21.6761 27.0518 19.3869 28 17 28H15C12.6131 28 10.3239 27.0518 8.63604 25.364C6.94821 23.6761 6 21.3869 6 19V11C6 10.4696 6.21071 9.96086 6.58579 9.58579Z"></path></svg></button><span class="style-1vem4tk">103</span></div><div class="style-79elbk"><button aria-haspopup="menu" aria-expanded="false" aria-controls="ArticleStickyMenuDropdown" class="style-1vr7y3r" aria-label="Open options" type="button"><span class="material-symbols-outlined style-v2p563" aria-hidden="true">more_horiz</span></button><dialog aria-modal="true" aria-labelledby="ArticleDeleteConfirmationModal-label" class="style-oi42s2"><div class="style-2aaf4j"><div class="style-bxc62b"><p id="ArticleDeleteConfirmationModal-label" class="style-1snuvpu">Delete article</p><button type="button" aria-label="" class="style-o8tyjw"><span class="material-symbols-outlined style-v2p563" aria-hidden="true">close</span></button></div><div class="style-6vdptm"><p>Deleted articles cannot be recovered.</p><p>Draft of this article would be also deleted.</p><p>Are you sure you want to delete this article?</p></div><div class="style-111ab2g"><button font-size="16" type="button" class="style-hreeih">Cancel</button><button font-size="16" type="button" class="style-y54waz">Delete<span class="material-symbols-outlined is-fill style-1jvcm2e" aria-hidden="true">delete</span></button></div></div></dialog></div></div></div></div> <script type="application/json" class="js-react-on-rails-component" data-component-name="PersonalArticlePage" data-dom-id="PersonalArticlePage-react-component-47c937ff-59ba-4c69-9ae0-72cf1f5d59a7">{"authorAnalyticsTrackingId":null,"findyEventPopup":null,"headerBanner":{"bannerDisplayKey":"header_text_banner_displayed","isDisplayable":true},"organizationAnalyticsTrackingId":null,"promptLoginMessageImageSrc":"//cdn.qiita.com/assets/public/image-qiitan_for_login_modal-014e085d3e40a240e3fe8d61b70b29a9.png","isPostCompletePromptShow":false,"postCompleteModalImages":[],"isDisplayAdAboveArticle":false,"isDisplayHeaderTextBanner":false,"adventCalendarBeingHeldImageSrc":"//cdn.qiita.com/assets/public/advent_calendar/image-advent_calendar_being_held-bafa166cb2e60037f5e4ba3599642d8f.png","engineerFesta2024LabelImageSrc":"//cdn.qiita.com/assets/public/official_campaigns/engineer_festa_2024/back-label_decoration-38495dd16cb6a3347397f4c3e6fefc62.png","qiitaConferenceImageSrc":"//cdn.qiita.com/assets/public/official_campaigns/qiita_conference_2025/image-conference_2025_ogp-6e0440fbf6b8a9930e6cb68943b8a79c.png","adventCalendarRibbonImageSrc":"//cdn.qiita.com/assets/public/advent_calendar/back-advent_calendar_ribbon-ce0efac1d490b78816e848f879968544.png"}</script> </div><div id="GlobalFooter-react-component-c9087b53-9495-4559-85fb-870b1e22fc3d"><footer class="style-1geho0x"><div class="style-1vesoht"><div class="style-1xygyrj"><div class="style-j7qwjs"><a href="/"><svg role="img" aria-label="To top Qiita" viewBox="0 0 426.57 130" width="110" height="33.5" class="style-1g0k1wk"><circle cx="167.08" cy="21.4" r="12.28"></circle><path d="M250.81 29.66h23.48v18.9h-23.48z"></path><path d="M300.76 105.26a22.23 22.23 0 01-6.26-.86 12.68 12.68 0 01-5.17-3 14.41 14.41 0 01-3.56-5.76 28 28 0 01-1.3-9.22V48.56h29.61v-18.9h-29.52V3.29h-20.17v83.34q0 11.16 2.83 18.27a27.71 27.71 0 007.7 11.2 26.86 26.86 0 0011.43 5.62 47.56 47.56 0 0012.34 1.53h15.16v-18zM0 61.7a58.6 58.6 0 015-24.21A62.26 62.26 0 0118.73 17.9 63.72 63.72 0 0139 4.78 64.93 64.93 0 0164 0a65 65 0 0124.85 4.78 64.24 64.24 0 0120.38 13.12A62 62 0 01123 37.49a58.6 58.6 0 015 24.21 58.34 58.34 0 01-4 21.46 62.8 62.8 0 01-10.91 18.16l11.1 11.1a10.3 10.3 0 010 14.52 10.29 10.29 0 01-14.64 0l-12.22-12.41a65 65 0 01-15.78 6.65 66.32 66.32 0 01-17.55 2.3 64.63 64.63 0 01-45.23-18A62.82 62.82 0 015 85.81 58.3 58.3 0 010 61.7zm21.64.08a43.13 43.13 0 0012.42 30.63 42.23 42.23 0 0013.43 9.09A41.31 41.31 0 0064 104.8a42 42 0 0030-12.39 42.37 42.37 0 009-13.64 43.43 43.43 0 003.3-17 43.77 43.77 0 00-3.3-17A41.7 41.7 0 0080.55 22 41.78 41.78 0 0064 18.68 41.31 41.31 0 0047.49 22a42.37 42.37 0 00-13.43 9.08 43.37 43.37 0 00-12.42 30.7zM331.89 78a47.59 47.59 0 013.3-17.73 43.22 43.22 0 019.34-14.47A44.25 44.25 0 01359 36a47.82 47.82 0 0118.81-3.58 42.72 42.72 0 019.26 1 46.5 46.5 0 018.22 2.58 40 40 0 017 3.84 44.39 44.39 0 015.71 4.63l1.22-9.47h17.35v85.83h-17.35l-1.17-9.42a42.54 42.54 0 01-5.84 4.67 43.11 43.11 0 01-7 3.79 44.86 44.86 0 01-8.17 2.59 43 43 0 01-9.22 1A47.94 47.94 0 01359 119.9a43.3 43.3 0 01-14.47-9.71 44.17 44.17 0 01-9.34-14.47 47 47 0 01-3.3-17.72zm20.27-.08a29.16 29.16 0 002.17 11.34 27 27 0 005.92 8.88 26.69 26.69 0 008.76 5.76 29.19 29.19 0 0021.44 0 26.11 26.11 0 008.72-5.76 27.57 27.57 0 005.88-8.84 29 29 0 002.16-11.38 28.62 28.62 0 00-2.16-11.22 26.57 26.57 0 00-5.93-8.8 27.68 27.68 0 00-19.51-7.9 28.29 28.29 0 00-10.77 2.05 26.19 26.19 0 00-8.71 5.75 27.08 27.08 0 00-5.84 8.8 28.94 28.94 0 00-2.13 11.31zm-194.97-30.5h19.78v73.54h-19.78zm49.25 0h19.78v73.54h-19.78z"></path><circle cx="216.33" cy="21.4" r="12.28"></circle></svg></a><p class="style-754ift">How developers code is here.</p><a href="/official-campaigns/conference/2025?utm_source=qiita&utm_medium=banner&utm_campaign=global_footer_banner_default&utm_content=default" class="style-zsz8fb"><img src="//cdn.qiita.com/assets/public/banner-qiita_conference-c746f76f279d57268fa51a1f5b7c9151.png" alt="Qiita Conference 2025 will be held!: 4/23(wed) - 4/25(Fri)" height="60" width="300" class="style-1efditc"/></a></div><small class="style-120vwzo">© 2011-2025<span class="style-15fzge">Qiita Inc.</span></small></div><nav aria-label="Footer" class="style-16bbk6m"><div class="style-u4ybgy"><p id="guideHelp" class="style-35ezg3">Guide & Help</p><ul aria-labelledby="guideHelp" class="style-1fhgjcy"><li><a href="/about" class="style-ah54os">About</a></li><li><a href="/terms" class="style-ah54os">Terms</a></li><li><a href="/privacy" class="style-ah54os">Privacy</a></li><li><a href="http://help.qiita.com/ja/articles/qiita-community-guideline" target="_blank" class="style-ah54os">Guideline</a></li><li><a href="https://help.qiita.com/ja/articles/others-brand-guideline" target="_blank" class="style-ah54os">Media Kit</a></li><li><a href="https://github.com/increments/qiita-discussions/discussions/116" target="_blank" class="style-ah54os">Feedback/Requests</a></li><li><a href="https://help.qiita.com" target="_blank" class="style-ah54os">Help</a></li><li><a href="https://business.qiita.com/?utm_source=qiita&utm_medium=referral&utm_content=footer" target="_blank" class="style-ah54os">Advertisement</a></li></ul></div><div class="style-u4ybgy"><p id="contents" class="style-35ezg3">Contents</p><ul aria-labelledby="contents" class="style-1fhgjcy"><li><a href="/release-notes" class="style-ah54os">Release Note</a></li><li><a href="/official-events" class="style-ah54os">Official Event</a></li><li><a href="/official-columns" class="style-ah54os">Official Column</a></li><li><a href="/advent-calendar/2024" class="style-ah54os">Advent Calendar</a></li><li><a href="/qiita-award" class="style-ah54os">Qiita Award</a></li><li><a href="/white_papers/2024" class="style-ah54os">Engineer White Paper</a></li><li><a href="/api/v2/docs" class="style-ah54os">API</a></li></ul></div><div class="style-u4ybgy"><p id="sns" class="style-35ezg3">Official Accounts</p><ul aria-labelledby="sns" class="style-1fhgjcy"><li><a href="https://x.com/qiita" target="_blank" class="style-ah54os"><svg class="style-ox3ag9" viewBox="0 0 20 20" aria-label="X(Twitter)"><path d="m11.68 8.62 6.55-7.62h-1.55l-5.69 6.62-4.55-6.62h-5.25l6.88 10.01-6.88 7.99h1.55l6.01-6.99 4.8 6.99h5.24l-7.13-10.38zm-2.13 2.47-.7-1-5.54-7.92h2.39l4.47 6.4.7 1 5.82 8.32h-2.39l-4.75-6.79z"></path></svg><span class="style-15fzge">@Qiita</span></a></li><li><a href="https://x.com/qiita_milestone" target="_blank" class="style-ah54os"><svg class="style-ox3ag9" viewBox="0 0 20 20" aria-label="X(Twitter)"><path d="m11.68 8.62 6.55-7.62h-1.55l-5.69 6.62-4.55-6.62h-5.25l6.88 10.01-6.88 7.99h1.55l6.01-6.99 4.8 6.99h5.24l-7.13-10.38zm-2.13 2.47-.7-1-5.54-7.92h2.39l4.47 6.4.7 1 5.82 8.32h-2.39l-4.75-6.79z"></path></svg><span class="style-15fzge">@qiita_milestone</span></a></li><li><a href="https://x.com/qiitapoi" target="_blank" class="style-ah54os"><svg class="style-ox3ag9" viewBox="0 0 20 20" aria-label="X(Twitter)"><path d="m11.68 8.62 6.55-7.62h-1.55l-5.69 6.62-4.55-6.62h-5.25l6.88 10.01-6.88 7.99h1.55l6.01-6.99 4.8 6.99h5.24l-7.13-10.38zm-2.13 2.47-.7-1-5.54-7.92h2.39l4.47 6.4.7 1 5.82 8.32h-2.39l-4.75-6.79z"></path></svg><span class="style-15fzge">@qiitapoi</span></a></li><li><a href="https://www.facebook.com/qiita/" target="_blank" class="style-ah54os">Facebook</a></li><li><a href="https://www.youtube.com/@qiita5366" target="_blank" class="style-ah54os">YouTube</a></li><li><a href="https://open.spotify.com/show/4E7yCLeCLeQUsNqM4HXFXA" target="_blank" class="style-ah54os">Podcast</a></li></ul></div><div class="style-u4ybgy"><p id="service" class="style-35ezg3">Our service</p><ul aria-labelledby="service" class="style-1fhgjcy"><li><a href="https://teams.qiita.com/" target="_blank" class="style-ah54os">Qiita Team</a></li><li><a href="https://zine.qiita.com?utm_source=qiita&utm_medium=referral&utm_content=footer" target="_blank" class="style-ah54os">Qiita Zine</a></li><li><a href="https://suzuri.jp/qiita" target="_blank" class="style-ah54os">Official Shop</a></li></ul></div><div class="style-u4ybgy"><p id="corporate" class="style-35ezg3">Company</p><ul aria-labelledby="corporate" class="style-1fhgjcy"><li><a href="https://corp.qiita.com/company" target="_blank" class="style-ah54os">About Us</a></li><li><a href="https://corp.qiita.com/jobs/" target="_blank" class="style-ah54os">Careers</a></li><li><a href="https://blog.qiita.com" target="_blank" class="style-ah54os">Qiita Blog</a></li><li><a href="https://corp.qiita.com/releases/" target="_blank" class="style-ah54os">News Release</a></li></ul></div></nav></div></footer></div> <script type="application/json" class="js-react-on-rails-component" data-component-name="GlobalFooter" data-dom-id="GlobalFooter-react-component-c9087b53-9495-4559-85fb-870b1e22fc3d">{"currentYear":2025,"pathInfo":"/ohtsuka1317/items/4519bc2d08899ddf6a83","bannerUrl":"//cdn.qiita.com/assets/public/banner-qiita_conference-c746f76f279d57268fa51a1f5b7c9151.png","adventCalendarBannerUrl":"//cdn.qiita.com/assets/public/banner-qiita_advent_calendar_2024-8fefcb4d8f1b460321d6efd20e955784.png","latestHeldAdventCalendarYear":2024,"latestHeldWhitePaperYear":2024,"qiitaTeamLandingPageRootUrl":"https://teams.qiita.com/"}</script> <div id="Snackbar-react-component-82841640-7ea5-4076-be3c-ab95db81e821"></div> <script type="application/json" class="js-react-on-rails-component" data-component-name="Snackbar" data-dom-id="Snackbar-react-component-82841640-7ea5-4076-be3c-ab95db81e821">{}</script> <div id="LoginModal-react-component-b31c6ab9-c6bd-44a5-a238-5d90d450cbb8"></div> <script type="application/json" class="js-react-on-rails-component" data-component-name="LoginModal" data-dom-id="LoginModal-react-component-b31c6ab9-c6bd-44a5-a238-5d90d450cbb8">{"imageUrl":"//cdn.qiita.com/assets/public/image-qiitan_for_login_modal_glimpse-c148ec9e4debf1f4b880deec194b6fc8.png","githubAuthUrl":"https://oauth.qiita.com/auth/github?callback_action=login_or_signup\u0026realm=qiita\u0026redirect_to=%2Fohtsuka1317%2Fitems%2F4519bc2d08899ddf6a83","googleAuthUrl":"https://oauth.qiita.com/auth/google?callback_action=login_or_signup\u0026realm=qiita\u0026redirect_to=%2Fohtsuka1317%2Fitems%2F4519bc2d08899ddf6a83","twitterAuthUrl":"https://oauth.qiita.com/auth/twitter?callback_action=login_or_signup\u0026realm=qiita\u0026redirect_to=%2Fohtsuka1317%2Fitems%2F4519bc2d08899ddf6a83"}</script> </div><div id="dataContainer" style="display: none;" data-config="{"actionPath":"public/items#show","settings":{"analyticsTrackingId":"G-KEVS5DBRVN","tagManagerId":"GTM-W9W5TX4","assetsMap":{},"csrfToken":"-P_Jx6X63s8M5067iRX8SrTxVryvVuMWJeNxedq5mW4sL8QMUSRHSQPuOnvsbX5424SNRYsKZxFEpsXYr4HqYA","locale":"en","pushOne":{"accessToken":"4bc4bb057a0601d388a7b9e499ca2307e9eb4fc172804e310c59e511d7cac356","dialogImageUrl":"//cdn.qiita.com/assets/public/push_notification/image-qiitan-572179a3bbde375850422ea48b2b6272.png"},"textlint":{"workerUrl":"//cdn.qiita.com/assets/public/textlint-worker-df6cd413fd29efd2848dc1e48bd3f170.min.js"},"datetimeParam":null},"currentUser":null,"additionalParams":{"query_parameters":{},"path_parameters":{"controller":"public/items","action":"show","user_id":"ohtsuka1317","type":"items","id":"4519bc2d08899ddf6a83"},"request_id":"fdc462d1-bcf3-4e02-ac98-5bd93b1ad0cc","user_id":null}}" /></body></html><script type="application/json" data-js-react-on-rails-store="AppStoreWithReactOnRails">{"snackbar":{"type":"","body":"","isActive":false},"article":{"article":{"body":"\u003cp data-sourcepos=\"1:1-1:78\"\u003eみんな大好き draw.io (diagrams.net) の細かいテクニックです。\u003c/p\u003e\n\u003cp data-sourcepos=\"3:1-3:274\"\u003eちなみに、2020年2月あたりから、\u003ca href=\"https://www.diagrams.net/blog/move-diagrams-net\" rel=\"nofollow noopener\" target=\"_blank\"\u003eセキュリティ上の理由でサイトのドメインを diagrams.net に名称変更し始めている\u003c/a\u003eので、アクセス先はこちらに変更したりしましょう。\u003c/p\u003e\n\u003ch2 data-sourcepos=\"5:1-5:42\"\u003e\n\u003cspan id=\"非圧縮xml形式のデフォルト化\" class=\"fragment\"\u003e\u003c/span\u003e\u003ca href=\"#%E9%9D%9E%E5%9C%A7%E7%B8%AExml%E5%BD%A2%E5%BC%8F%E3%81%AE%E3%83%87%E3%83%95%E3%82%A9%E3%83%AB%E3%83%88%E5%8C%96\"\u003e\u003ci class=\"fa fa-link\"\u003e\u003c/i\u003e\u003c/a\u003e非圧縮XML形式のデフォルト化\u003c/h2\u003e\n\u003cp data-sourcepos=\"7:1-7:192\"\u003eダイアグラムをファイル保存すると、デフォルトでは圧縮されたXMLになっていますが、これだと差分の確認・バージョン管理がしづらいです。\u003c/p\u003e\n\u003cp data-sourcepos=\"9:1-9:297\"\u003eメニューの「拡張 (Extras)」-\u0026gt;「圧縮 (Compressed)」のチェックを外すと非圧縮形式になるので、新しいファイルを作るたびにこれを実行しても良いのですが、忘れないように非圧縮XML形式をデフォルトにすると良いでしょう。\u003c/p\u003e\n\u003cp data-sourcepos=\"11:1-11:196\"\u003eメニューの拡張 (Extras) -\u0026gt; Configuration で開く設定ダイアログに以下を記載すると、アプリの再読み込み以降は非圧縮形式がデフォルトになります。\u003c/p\u003e\n\u003cdiv class=\"code-frame\" data-lang=\"json\" data-sourcepos=\"13:1-17:3\"\u003e\u003cdiv class=\"highlight\"\u003e\u003cpre\u003e\u003ccode\u003e\u003cspan class=\"p\"\u003e{\u003c/span\u003e\u003cspan class=\"w\"\u003e\n \u003c/span\u003e\u003cspan class=\"nl\"\u003e\"compressXml\"\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"kc\"\u003efalse\u003c/span\u003e\u003cspan class=\"w\"\u003e\n\u003c/span\u003e\u003cspan class=\"p\"\u003e}\u003c/span\u003e\u003cspan class=\"w\"\u003e\n\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003c/div\u003e\n\u003ch2 data-sourcepos=\"19:1-19:45\"\u003e\n\u003cspan id=\"コンテナ化子のリサイズ防止\" class=\"fragment\"\u003e\u003c/span\u003e\u003ca href=\"#%E3%82%B3%E3%83%B3%E3%83%86%E3%83%8A%E5%8C%96%E5%AD%90%E3%81%AE%E3%83%AA%E3%82%B5%E3%82%A4%E3%82%BA%E9%98%B2%E6%AD%A2\"\u003e\u003ci class=\"fa fa-link\"\u003e\u003c/i\u003e\u003c/a\u003eコンテナ化、子のリサイズ防止\u003c/h2\u003e\n\u003cp data-sourcepos=\"21:1-21:171\"\u003eある図形の中に他の図形を配置しても、それぞれの図形は独立していて、親図形を移動させたりしても子図形は移動しません。\u003c/p\u003e\n\u003cp data-sourcepos=\"23:1-23:326\"\u003eこれを一体化して扱うために図形を「グループ化」する、というのは、Microsoft Office などでもお馴染みの手段ですが、この場合は完全に一つの図形になってしまうため、親をサイズ変更したりすると子も同じようにサイズ変更されたりします。\u003c/p\u003e\n\u003cp data-sourcepos=\"25:1-25:225\"\u003eこれが便利な場合もありますが、やっぱりそこは独立して扱いたいよね、という場合、親を「コンテナ」にして一緒に扱う手段があります。以下のように設定します。\u003c/p\u003e\n\u003col data-sourcepos=\"27:1-31:0\"\u003e\n\u003cli data-sourcepos=\"27:1-27:81\"\u003e親図形のフォーマットパネルの「スタイル」タブを開く。\u003c/li\u003e\n\u003cli data-sourcepos=\"28:1-28:64\"\u003eProperty を開き、Container にチェックを入れる。\u003c/li\u003e\n\u003cli data-sourcepos=\"29:1-29:46\"\u003eResize Children のチェックを外す。\u003c/li\u003e\n\u003cli data-sourcepos=\"30:1-31:0\"\u003eお好みで、Collapsible のチェックを外す。（チェックしていると図形を折りたためるようになりますが、図形の左上に折りたたみ用のボタンが出てしまいます）\u003c/li\u003e\n\u003c/ol\u003e\n\u003cp data-sourcepos=\"32:1-32:258\"\u003eコンテナ化された図形の中に、子にしたい図形をドラッグ＆ドロップすると、親子関係ができます。この状態で親だけ移動すれば、グループ化した場合と同じように子も一緒に移動できます。\u003c/p\u003e\n\u003cp data-sourcepos=\"34:1-34:153\"\u003e一方で、Resize Children（子をリサイズする）の無効化により、親をリサイズしても子はリサイズされなくなります。\u003c/p\u003e\n\u003cp data-sourcepos=\"36:1-36:128\"\u003e\u003ca href=\"https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F43355%2Ffa215f53-e909-0e09-836e-4751679a02f4.gif?ixlib=rb-4.0.0\u0026amp;auto=format\u0026amp;gif-q=60\u0026amp;q=75\u0026amp;s=441f3122feb6611934dd26aac7a4f8e5\" target=\"_blank\" rel=\"nofollow noopener\"\u003e\u003cimg src=\"https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F43355%2Ffa215f53-e909-0e09-836e-4751679a02f4.gif?ixlib=rb-4.0.0\u0026amp;auto=format\u0026amp;gif-q=60\u0026amp;q=75\u0026amp;s=441f3122feb6611934dd26aac7a4f8e5\" alt=\"Container example\" srcset=\"https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F43355%2Ffa215f53-e909-0e09-836e-4751679a02f4.gif?ixlib=rb-4.0.0\u0026amp;auto=format\u0026amp;gif-q=60\u0026amp;q=75\u0026amp;w=1400\u0026amp;fit=max\u0026amp;s=67ed1f32b3665eaf7eaf9874a83c4bb4 1x\" data-canonical-src=\"https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43355/fa215f53-e909-0e09-836e-4751679a02f4.gif\" loading=\"lazy\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003ch2 data-sourcepos=\"39:1-39:24\"\u003e\n\u003cspan id=\"プレースホルダ\" class=\"fragment\"\u003e\u003c/span\u003e\u003ca href=\"#%E3%83%97%E3%83%AC%E3%83%BC%E3%82%B9%E3%83%9B%E3%83%AB%E3%83%80\"\u003e\u003ci class=\"fa fa-link\"\u003e\u003c/i\u003e\u003c/a\u003eプレースホルダ\u003c/h2\u003e\n\u003cp data-sourcepos=\"41:1-41:96\"\u003e親図形やダイアグラム自体に設定したメタデータを参照する機能です。\u003c/p\u003e\n\u003col data-sourcepos=\"43:1-47:0\"\u003e\n\u003cli data-sourcepos=\"43:1-43:60\"\u003e上の手順で、親図形をコンテナ化します。\u003c/li\u003e\n\u003cli data-sourcepos=\"44:1-44:116\"\u003e親図形の「データを編集 (Edit Data)」メニューから、適当なIDでデータを追加します。\u003c/li\u003e\n\u003cli data-sourcepos=\"45:1-45:120\"\u003e子図形の「データを編集」メニューで、「所有者 (Placeholders)」にチェックを入れます。\u003c/li\u003e\n\u003cli data-sourcepos=\"46:1-47:0\"\u003e子図形のラベルで、\u003ccode\u003e%データID%\u003c/code\u003e という形式（親に定義したデータのIDを \u003ccode\u003e%\u003c/code\u003e で挟む）の文字列が、親で定義したデータの内容に置換されるようになります。\u003c/li\u003e\n\u003c/ol\u003e\n\u003cp data-sourcepos=\"48:1-48:130\"\u003e\u003ca href=\"https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F43355%2F130c2857-3ac6-7443-d9b8-ac8e08fc3b25.gif?ixlib=rb-4.0.0\u0026amp;auto=format\u0026amp;gif-q=60\u0026amp;q=75\u0026amp;s=4a6b35328d40c9ca8873a4cc59f126c7\" target=\"_blank\" rel=\"nofollow noopener\"\u003e\u003cimg src=\"https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F43355%2F130c2857-3ac6-7443-d9b8-ac8e08fc3b25.gif?ixlib=rb-4.0.0\u0026amp;auto=format\u0026amp;gif-q=60\u0026amp;q=75\u0026amp;s=4a6b35328d40c9ca8873a4cc59f126c7\" alt=\"Placeholder example\" srcset=\"https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F43355%2F130c2857-3ac6-7443-d9b8-ac8e08fc3b25.gif?ixlib=rb-4.0.0\u0026amp;auto=format\u0026amp;gif-q=60\u0026amp;q=75\u0026amp;w=1400\u0026amp;fit=max\u0026amp;s=fda074d908f8a845e5e6c46f7f50a8b0 1x\" data-canonical-src=\"https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43355/130c2857-3ac6-7443-d9b8-ac8e08fc3b25.gif\" loading=\"lazy\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003ch2 data-sourcepos=\"51:1-51:19\"\u003e\n\u003cspan id=\"lineジャンプ\" class=\"fragment\"\u003e\u003c/span\u003e\u003ca href=\"#line%E3%82%B8%E3%83%A3%E3%83%B3%E3%83%97\"\u003e\u003ci class=\"fa fa-link\"\u003e\u003c/i\u003e\u003c/a\u003eLineジャンプ\u003c/h2\u003e\n\u003cp data-sourcepos=\"53:1-53:129\"\u003e線と線が交差するときに、Visio などのように線を「またがせて」見やすくすることができます。\u003c/p\u003e\n\u003ca href=\"https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F43355%2F81787193-a91f-1324-065d-677e450bff66.png?ixlib=rb-4.0.0\u0026amp;auto=format\u0026amp;gif-q=60\u0026amp;q=75\u0026amp;s=d398db3fccff4bd2f6c42800adec4b20\" target=\"_blank\" rel=\"nofollow noopener\"\u003e\u003cimg width=\"265\" alt=\"Line Jump example\" src=\"https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F43355%2F81787193-a91f-1324-065d-677e450bff66.png?ixlib=rb-4.0.0\u0026amp;auto=format\u0026amp;gif-q=60\u0026amp;q=75\u0026amp;s=d398db3fccff4bd2f6c42800adec4b20\" srcset=\"https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F43355%2F81787193-a91f-1324-065d-677e450bff66.png?ixlib=rb-4.0.0\u0026amp;auto=format\u0026amp;gif-q=60\u0026amp;q=75\u0026amp;w=1400\u0026amp;fit=max\u0026amp;s=8c67e92822ecb0ec8400ee59c57e0aa6 1x\" data-canonical-src=\"https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43355/81787193-a91f-1324-065d-677e450bff66.png\" loading=\"lazy\"\u003e\u003c/a\u003e\n\u003cp data-sourcepos=\"57:1-57:198\"\u003eこれは、前面にある方の線のスタイルで「Lineジャンプ (Line jumps)」を「なし (None)」以外に設定すれば有効にできます。上は「円弧 (Arc)」の例です。\u003c/p\u003e\n\u003ch2 data-sourcepos=\"60:1-60:9\"\u003e\n\u003cspan id=\"数式\" class=\"fragment\"\u003e\u003c/span\u003e\u003ca href=\"#%E6%95%B0%E5%BC%8F\"\u003e\u003ci class=\"fa fa-link\"\u003e\u003c/i\u003e\u003c/a\u003e数式\u003c/h2\u003e\n\u003cp data-sourcepos=\"62:1-62:191\"\u003eメニューの「拡張 (Extras)」-\u0026gt; 「数式組版 (Mathematical Typesetting)」を有効にすると、AsciiMath形式もしくはLaTeX形式で入力した数式を表示できます。\u003c/p\u003e\n\u003cul data-sourcepos=\"64:1-66:0\"\u003e\n\u003cli data-sourcepos=\"64:1-64:52\"\u003eAsciiMath: 数式をバッククオートで囲む\u003c/li\u003e\n\u003cli data-sourcepos=\"65:1-66:0\"\u003eLaTeX: 数式を \u003ccode\u003e$$\u003c/code\u003e で囲む、もしくは \u003ccode\u003e\$\u003c/code\u003e と \u003ccode\u003e\$\u003c/code\u003e で囲む\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp data-sourcepos=\"67:1-67:143\"\u003e\u003ca href=\"https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F43355%2F822df3a8-133c-930b-f378-2a92cb43fb7d.gif?ixlib=rb-4.0.0\u0026amp;auto=format\u0026amp;gif-q=60\u0026amp;q=75\u0026amp;s=5d13d894eb38abc2aaff42bd639f9f48\" target=\"_blank\" rel=\"nofollow noopener\"\u003e\u003cimg src=\"https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F43355%2F822df3a8-133c-930b-f378-2a92cb43fb7d.gif?ixlib=rb-4.0.0\u0026amp;auto=format\u0026amp;gif-q=60\u0026amp;q=75\u0026amp;s=5d13d894eb38abc2aaff42bd639f9f48\" alt=\"Mathematical Typesetting example\" srcset=\"https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F43355%2F822df3a8-133c-930b-f378-2a92cb43fb7d.gif?ixlib=rb-4.0.0\u0026amp;auto=format\u0026amp;gif-q=60\u0026amp;q=75\u0026amp;w=1400\u0026amp;fit=max\u0026amp;s=ff92c6fd64a2daa49cd66b0901f3a522 1x\" data-canonical-src=\"https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43355/822df3a8-133c-930b-f378-2a92cb43fb7d.gif\" loading=\"lazy\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp data-sourcepos=\"70:1-70:48\"\u003e詳しくは公式のFAQを参照ください。\u003c/p\u003e\n\u003cp data-sourcepos=\"72:1-72:96\"\u003e\u003ciframe id=\"qiita-embed-content__979afe09ec9acfe896c3eb2f2503650b\" src=\"https://qiita.com/embed-contents/link-card#qiita-embed-content__979afe09ec9acfe896c3eb2f2503650b\" data-content=\"https%3A%2F%2Fdesk.draw.io%2Fsupport%2Fsolutions%2Farticles%2F16000032875-how-to-use-mathematical-typesetting-\" frameborder=\"0\" scrolling=\"no\" loading=\"lazy\" style=\"width:100%;\" height=\"29\"\u003e\n\u003c/iframe\u003e\n\u003c/p\u003e\n","comments":{"totalCount":0},"createdAt":"2020-05-17T15:18:36Z","elapsedYearsFromLastModifiedAt":4,"encryptedId":"BAhJIhRBcnRpY2xlLTEyMjU0OTQGOgZFRg==--89011109315fe63b0bd150bfce9309175c3cd45a9148c771131049a1d81d732e","isBanned":false,"isDeprecated":true,"isDestroyableByViewer":false,"isEditRequestReadableByViewer":true,"isEditRequestSendableByViewer":true,"isLikableByViewer":true,"isLikedByViewer":false,"isPublic":true,"isSlide":false,"isStockableByViewer":true,"isStockedByViewer":false,"isSubscribableByViewer":false,"isSubscribedByViewer":false,"isUpdatableByViewer":false,"isUpdated":false,"lastModifiedAt":"2020-05-17T15:18:36Z","publishedAt":"2020-05-17T15:18:36Z","likesCount":116,"linkUrl":"https://qiita.com/ohtsuka1317/items/4519bc2d08899ddf6a83","organization":null,"stockedCount":103,"title":"draw.io (diagrams.net) の細かいテクニック","toc":"\u003cul\u003e\n\u003cli\u003e\n\u003ca href=\"#%E9%9D%9E%E5%9C%A7%E7%B8%AExml%E5%BD%A2%E5%BC%8F%E3%81%AE%E3%83%87%E3%83%95%E3%82%A9%E3%83%AB%E3%83%88%E5%8C%96\"\u003e非圧縮XML形式のデフォルト化\u003c/a\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003ca href=\"#%E3%82%B3%E3%83%B3%E3%83%86%E3%83%8A%E5%8C%96%E5%AD%90%E3%81%AE%E3%83%AA%E3%82%B5%E3%82%A4%E3%82%BA%E9%98%B2%E6%AD%A2\"\u003eコンテナ化、子のリサイズ防止\u003c/a\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003ca href=\"#%E3%83%97%E3%83%AC%E3%83%BC%E3%82%B9%E3%83%9B%E3%83%AB%E3%83%80\"\u003eプレースホルダ\u003c/a\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003ca href=\"#line%E3%82%B8%E3%83%A3%E3%83%B3%E3%83%97\"\u003eLineジャンプ\u003c/a\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003ca href=\"#%E6%95%B0%E5%BC%8F\"\u003e数式\u003c/a\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n","totalPv":76371,"uuid":"4519bc2d08899ddf6a83","banReason":null,"adventCalendarItem":null,"author":{"encryptedId":"BAhJIg9Vc2VyLTQzMzU1BjoGRUY=--b979f225a5251c76d0f4f1031ea1f6368a080e5599eecb188b5e809d722af752","isBlockingViewer":false,"isFollowableByViewer":true,"isFollowedByViewer":false,"isTweetWebNotificationReceivable":true,"profileImageUrlW48":"https://qiita-user-profile-images.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F43355%2Fprofile-images%2F1473689502?ixlib=rb-4.0.0\u0026auto=compress%2Cformat\u0026lossless=0\u0026w=48\u0026s=dea7c5fd5b4364160f27b2fad85a8c35","profileImageUrlOriginal":"https://qiita-image-store.s3.amazonaws.com/0/43355/profile-images/1473689502","urlName":"ohtsuka1317","twitterUrlName":null,"name":"","organizations":{"edges":[]}},"tags":[{"name":"Draw.io","urlName":"draw.io"}],"followingLikers":[],"recentlyFollowingLikers":[],"postingCampaign":null},"comments":[],"client":null,"adsEventEmitter":null}}</script>