{"id":11214,"date":"2025-12-19T15:27:30","date_gmt":"2025-12-19T06:27:30","guid":{"rendered":"https:\/\/www.skyer9.pe.kr\/wordpress\/?p=11214"},"modified":"2025-12-19T15:43:33","modified_gmt":"2025-12-19T06:43:33","slug":"mermaid-%ec%8b%9c%ec%9e%91%ed%95%98%ea%b8%b0","status":"publish","type":"post","link":"https:\/\/www.skyer9.pe.kr\/wordpress\/?p=11214","title":{"rendered":"Mermaid \uc2dc\uc791\ud558\uae30"},"content":{"rendered":"<h1>Mermaid \uc2dc\uc791\ud558\uae30<\/h1>\n<p>Mermaid\ub294 \ud14d\uc2a4\ud2b8 \uae30\ubc18\uc758 \ub9c8\ud06c\ub2e4\uc6b4(Markdown)\uacfc \uc720\uc0ac\ud55c \ubb38\ubc95\uc744 \uc0ac\uc6a9\ud558\uc5ec \uc21c\uc11c\ub3c4, \ucc28\ud2b8, \ub2e4\uc774\uc5b4\uadf8\ub7a8\uc744 \uc790\ub3d9\uc73c\ub85c \uc0dd\uc131\ud574 \uc8fc\ub294 \ub3c4\uad6c\uc785\ub2c8\ub2e4. \ubcf5\uc7a1\ud55c \uadf8\ub798\ud53d \ud234 \uc5c6\uc774 \ucf54\ub4dc\ub9cc\uc73c\ub85c \uadf8\ub9bc\uc744 \uadf8\ub9b4 \uc218 \uc788\ub2e4\ub294 \uac83\uc774 \uac00\uc7a5 \ud070 \uc7a5\uc810\uc785\ub2c8\ub2e4.<\/p>\n<h2>\uc21c\uc11c\ub3c4 (Flowcharts)<\/h2>\n<p>\uac00\uc7a5 \uae30\ubcf8\uc774 \ub418\ub294 \ubb38\ubc95\uc73c\ub85c, \ubc29\ud5a5\uc744 \uc124\uc815\ud558\uace0 \ub178\ub4dc(\ub3c4\ud615)\uc640 \ud654\uc0b4\ud45c\ub97c \uc5f0\uacb0\ud569\ub2c8\ub2e4.<\/p>\n<ul>\n<li>\n<p>\ubc29\ud5a5 \uc124\uc815: graph TD (\uc704\uc5d0\uc11c \uc544\ub798\ub85c), graph LR (\uc67c\ucabd\uc5d0\uc11c \uc624\ub978\ucabd\uc73c\ub85c)<\/p>\n<\/li>\n<li>\n<p>\ub3c4\ud615 \ubaa8\uc591:<\/p>\n<ul>\n<li>\n<p><code>[ ]<\/code>: \uc9c1\uc0ac\uac01\ud615 (\ud504\ub85c\uc138\uc2a4)<\/p>\n<\/li>\n<li>\n<p><code>(( ))<\/code>: \uc6d0\ud615 (\uc774\ubca4\ud2b8)<\/p>\n<\/li>\n<li>\n<p><code>{ }<\/code>: \ub9c8\ub984\ubaa8 (\uacb0\uc815\/\uc870\uac74)<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<pre><code class=\"language-text\">graph LR\n    A[\uc2dc\uc791] --&gt; B{\uc870\uac74 \ud655\uc778}\n    B -- \uc608 --&gt; C[\uc2b9\uc778]\n    B -- \uc544\ub2c8\uc624 --&gt; D[\uac70\uc808]<\/code><\/pre>\n<p><img decoding=\"async\" src=\"https:\/\/www.skyer9.pe.kr\/wordpress\/wp-content\/uploads\/2025\/12\/image-1766125202970.png\" alt=\"file\" \/><\/p>\n<p>&amp;<code>nbsp<\/code>; \ub97c \uc774\uc6a9\ud574 \ubc15\uc2a4\uc758 \ud3ed\uc744 \ub298\ub9b4 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<pre><code class=\"language-text\">graph TD\n    %% \ubc15\uc2a4 01\n    subgraph &quot;\ubc15\uc2a4 01&quot;\n        A[&quot;&lt;b&gt;\uc81c\ubaa9 01&lt;\/b&gt;&lt;br\/&gt;\ub0b4\uc6a9 01&quot;]\n    end\n\n    %% \ubc15\uc2a4 02\n    subgraph &quot;\ubc15\uc2a4 02&quot;\n        B[&quot;&lt;b&gt;\uc81c\ubaa9 02&lt;\/b&gt;&lt;br\/&gt;\ub0b4\uc6a9 02&quot;]\n        C[&quot;&lt;b&gt;\uc81c\ubaa9 03&lt;\/b&gt;&lt;br\/&gt;\ub0b4\uc6a9 03&quot;]\n        A --&gt; B\n        B --&gt; C\n    end\n\n    %% \uc2a4\ud0c0\uc77c\ub9c1\n    style A fill:#FFECB3,stroke:#FFA000,stroke-width:2px\n    style B fill:#E3F2FD,stroke:#2196F3,stroke-width:2px\n    style C fill:#E3F2FD,stroke:#2196F3,stroke-width:2px<\/code><\/pre>\n<p><img decoding=\"async\" src=\"https:\/\/www.skyer9.pe.kr\/wordpress\/wp-content\/uploads\/2025\/12\/image-1766125941224.png\" alt=\"file\" \/><\/p>\n<h2>\uc2dc\ud000\uc2a4 \ub2e4\uc774\uc5b4\uadf8\ub7a8 (Sequence Diagrams)<\/h2>\n<p>\uac1d\uccb4 \uac04\uc758 \uc0c1\ud638\uc791\uc6a9\uacfc \uba54\uc2dc\uc9c0 \ud750\ub984\uc744 \uc2dc\uac04 \uc21c\uc11c\ub300\ub85c \ubcf4\uc5ec\uc904 \ub54c \uc0ac\uc6a9\ud569\ub2c8\ub2e4.<\/p>\n<ul>\n<li>\n<p>participant: \ub4f1\uc7a5\uc778\ubb3c \uc815\uc758<\/p>\n<\/li>\n<li>\n<p>-&gt;&gt; : \uc2e4\uc120 \ud654\uc0b4\ud45c (\uc694\uccad)<\/p>\n<\/li>\n<li>\n<p>&#8211;&gt;&gt; : \uc810\uc120 \ud654\uc0b4\ud45c (\uc751\ub2f5)<\/p>\n<\/li>\n<\/ul>\n<pre><code class=\"language-text\">sequenceDiagram\n    \uc0ac\uc6a9\uc790-&gt;&gt;\ube0c\ub77c\uc6b0\uc800: URL \uc785\ub825\n    \ube0c\ub77c\uc6b0\uc800-&gt;&gt;\uc11c\ubc84: \ud398\uc774\uc9c0 \uc694\uccad\n    \uc11c\ubc84--&gt;&gt;\ube0c\ub77c\uc6b0\uc800: HTML \uc751\ub2f5\n    \ube0c\ub77c\uc6b0\uc800--&gt;&gt;\uc0ac\uc6a9\uc790: \ud654\uba74 \ud45c\uc2dc<\/code><\/pre>\n<p><img decoding=\"async\" src=\"https:\/\/www.skyer9.pe.kr\/wordpress\/wp-content\/uploads\/2025\/12\/image-1766125380062.png\" alt=\"file\" \/><\/p>\n<h2>\uac04\ud2b8 \ucc28\ud2b8 (Gantt Charts)<\/h2>\n<p>\ud504\ub85c\uc81d\ud2b8 \uc77c\uc815\uacfc \uc791\uc5c5 \uc9c4\ud589 \uc0c1\ud669\uc744 \uc2dc\uac01\ud654\ud569\ub2c8\ub2e4.<\/p>\n<pre><code class=\"language-text\">gantt\n    title \ud504\ub85c\uc81d\ud2b8 \uc77c\uc815\ud45c\n    dateFormat  YYYY-MM-DD\n    section \uae30\ud68d\n    \uc694\uad6c\uc0ac\ud56d \ubd84\uc11d   :a1, 2023-10-01, 10d\n    section \uac1c\ubc1c\n    DB \uc124\uacc4        :after a1, 7d\n    API \uac1c\ubc1c       :2023-10-15, 14d<\/code><\/pre>\n<p><img decoding=\"async\" src=\"https:\/\/www.skyer9.pe.kr\/wordpress\/wp-content\/uploads\/2025\/12\/image-1766125511212.png\" alt=\"file\" \/><\/p>\n<h2>\uc0c1\ud0dc \ub2e4\uc774\uc5b4\uadf8\ub7a8 (State Diagrams)<\/h2>\n<p>\uc2dc\uc2a4\ud15c\uc774\ub098 \uac1d\uccb4\uc758 \uc0c1\ud0dc \ubcc0\ud654\ub97c \ub098\ud0c0\ub0bc \ub54c \uc720\uc6a9\ud569\ub2c8\ub2e4.<\/p>\n<pre><code class=\"language-text\">stateDiagram-v2\n    [*] --&gt; \ub300\uae30\uc911\n    \ub300\uae30\uc911 --&gt; \uc2e4\ud589\uc911: \uc2dc\uc791 \ubc84\ud2bc\n    \uc2e4\ud589\uc911 --&gt; \uc911\uc9c0\ub428: \uc624\ub958 \ubc1c\uc0dd\n    \uc2e4\ud589\uc911 --&gt; [*]: \uc644\ub8cc<\/code><\/pre>\n<p><img decoding=\"async\" src=\"https:\/\/www.skyer9.pe.kr\/wordpress\/wp-content\/uploads\/2025\/12\/image-1766125596200.png\" alt=\"file\" \/><\/p>\n<h2>\uae30\ud0c0<\/h2>\n<ul>\n<li>\n<p>\uc8fc\uc11d: %%\ub97c \uc0ac\uc6a9\ud558\uba74 \ucf54\ub4dc \ub0b4\uc5d0 \uba54\ubaa8\ub97c \ub0a8\uae38 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<\/li>\n<li>\n<p>\uc2a4\ud0c0\uc77c \uc218\uc815: style \ub178\ub4dc\uc774\ub984 fill:#\uc0c9\uc0c1\ucf54\ub4dc\ub97c \uc0ac\uc6a9\ud558\uc5ec \ud2b9\uc815 \ub3c4\ud615\uc758 \uc0c9\uc0c1\uc744 \ubc14\uafc0 \uc218 \uc788\uc2b5\ub2c8\ub2e4. (\uc0ac\uc6a9\uc790\ub2d8\uc774 \ucc98\uc74c\uc5d0 \uc8fc\uc2e0 \ucf54\ub4dc \ud558\ub2e8\uc5d0 \uc788\ub358 \ubc29\uc2dd\uc785\ub2c8\ub2e4.)<\/p>\n<\/li>\n<li>\n<p>\uc11c\ube0c\uadf8\ub798\ud504: subgraph\ub97c \uc0ac\uc6a9\ud558\uba74 \uc5f0\uad00\ub41c \ub178\ub4dc\ub4e4\uc744 \ubc15\uc2a4\ub85c \ubb36\uc5b4 \uadf8\ub8f9\ud654\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Mermaid \uc2dc\uc791\ud558\uae30 Mermaid\ub294 \ud14d\uc2a4\ud2b8 \uae30\ubc18\uc758 \ub9c8\ud06c\ub2e4\uc6b4(Markdown)\uacfc \uc720\uc0ac\ud55c \ubb38\ubc95\uc744 \uc0ac\uc6a9\ud558\uc5ec \uc21c\uc11c\ub3c4, \ucc28\ud2b8, \ub2e4\uc774\uc5b4\uadf8\ub7a8\uc744 \uc790\ub3d9\uc73c\ub85c \uc0dd\uc131\ud574 \uc8fc\ub294 \ub3c4\uad6c\uc785\ub2c8\ub2e4. \ubcf5\uc7a1\ud55c \uadf8\ub798\ud53d \ud234 \uc5c6\uc774 \ucf54\ub4dc\ub9cc\uc73c\ub85c \uadf8\ub9bc\uc744 \uadf8\ub9b4 \uc218 \uc788\ub2e4\ub294 \uac83\uc774 \uac00\uc7a5 \ud070 \uc7a5\uc810\uc785\ub2c8\ub2e4. \uc21c\uc11c\ub3c4 (Flowcharts) \uac00\uc7a5 \uae30\ubcf8\uc774 \ub418\ub294 \ubb38\ubc95\uc73c\ub85c, \ubc29\ud5a5\uc744 \uc124\uc815\ud558\uace0 \ub178\ub4dc(\ub3c4\ud615)\uc640 \ud654\uc0b4\ud45c\ub97c \uc5f0\uacb0\ud569\ub2c8\ub2e4. \ubc29\ud5a5 \uc124\uc815: graph TD (\uc704\uc5d0\uc11c \uc544\ub798\ub85c), graph LR (\uc67c\ucabd\uc5d0\uc11c \uc624\ub978\ucabd\uc73c\ub85c) \ub3c4\ud615 \ubaa8\uc591: [ ]: \uc9c1\uc0ac\uac01\ud615\u2026 <span class=\"read-more\"><a href=\"https:\/\/www.skyer9.pe.kr\/wordpress\/?p=11214\">Read More &raquo;<\/a><\/span><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[],"class_list":["post-11214","post","type-post","status-publish","format-standard","hentry","category-devops"],"_links":{"self":[{"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/11214","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=11214"}],"version-history":[{"count":7,"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/11214\/revisions"}],"predecessor-version":[{"id":11226,"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/11214\/revisions\/11226"}],"wp:attachment":[{"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=11214"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=11214"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=11214"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}