\n\t
<\/div>\n\t
\n\t\t
\nflowchart TB\n    A([\u958b\u59cb]) --> B[\u8eca\u304c\u4fe1\u53f7\u6a5f\u306b\u63a5\u8fd1];\n    B --> C{\u4fe1\u53f7\u306e\u8272\u3092\u78ba\u8a8d};\n    C -->|\u9752| D[\u9032\u3080];\n    C -->|\u9ec4| E{\u5b89\u5168\u306b\u505c\u6b62\u3067\u304d\u308b\u304b\uff1f};\n    C -->|\u8d64| F[\u505c\u6b62\u3059\u308b];\n    E -->|\"\u306f\u3044\"| F;\n    E -->|\"\u3044\u3044\u3048\"| D;\n    D --> G([\u4ea4\u5dee\u70b9\u3092\u901a\u904e]);\n    F --> H([\u505c\u6b62\u7dda\u3067\u5f85\u6a5f]);\n    <\/pre>\n\t<\/div>\n\t <\/div>\n<\/div>\n\nflowchart TB\n    A([\u958b\u59cb]) --> B[\u8eca\u304c\u4fe1\u53f7\u6a5f\u306b\u63a5\u8fd1];\n    B --> C{\u4fe1\u53f7\u306e\u8272\u3092\u78ba\u8a8d};\n    C -->|\u9752| D[\u9032\u3080];\n    C -->|\u9ec4| E{\u5b89\u5168\u306b\u505c\u6b62\u3067\u304d\u308b\u304b\uff1f};\n    C -->|\u8d64| F[\u505c\u6b62\u3059\u308b];\n    E -->|\"\u306f\u3044\"| F;\n    E -->|\"\u3044\u3044\u3048\"| D;\n    D --> G([\u4ea4\u5dee\u70b9\u3092\u901a\u904e]);\n    F --> H([\u505c\u6b62\u7dda\u3067\u5f85\u6a5f]);\n<\/pre>\n
\n    \u30b5\u30d6\u30b0\u30e9\u30d5<\/p>\n
\n\t <\/div>\n\t\n\t\t\n\tflowchart LR\n\t    %% \u30b5\u30d6\u30b0\u30e9\u30d5 1\uff1a\u51e6\u7406\u958b\u59cb\u301c\u5165\u529b\n\t    subgraph StartFlow [\u5165\u529b\u30d5\u30a7\u30fc\u30ba]\n\t        A([\u958b\u59cb\u30ce\u30fc\u30c9\uff08\u4e38\uff09])\n\t        B[\/\u5165\u529b\u30ce\u30fc\u30c9\uff08\u5e73\u884c\u56db\u8fba\u5f62\uff09\/]\n\t    end\n\n\t    %% \u30b5\u30d6\u30b0\u30e9\u30d5 2\uff1a\u51e6\u7406\n\t    subgraph ProcessingFlow [\u51e6\u7406\u30d5\u30a7\u30fc\u30ba]\n\t        C[\u51e6\u7406\u30ce\u30fc\u30c9\uff08\u89d2\u4e38\uff09]\n\t        D{{\u6761\u4ef6\u30ce\u30fc\u30c9\uff08\u3072\u3057\u5f62\uff09}}\n\t    end\n\n\t    %% \u30b5\u30d6\u30b0\u30e9\u30d5 3\uff1a\u51fa\u529b\u3068\u7d42\u4e86\n\t    subgraph OutputFlow [\u51fa\u529b\u30d5\u30a7\u30fc\u30ba]\n\t        E[\\\u51fa\u529b\u30ce\u30fc\u30c9\uff08\u5e73\u884c\u56db\u8fba\u5f62\uff09\\]\n\t        F([\u7d42\u4e86\u30ce\u30fc\u30c9\uff08\u4e38\uff09])\n\t    end\n\n\t    %% \u901a\u5e38\u306e\u77e2\u5370\n\t    A --> B\n\t    B --> C\n\t    C --> D\n\n\t    %% \u6761\u4ef6\u5206\u5c90\uff08\u306f\u3044\uff0f\u3044\u3044\u3048\uff09\n\t    D -- Yes --> E\n\t    D -- No --> C\n\n\t    %% \u592a\u7dda\u306e\u77e2\u5370\uff08\u91cd\u8981\u306a\u9077\u79fb\uff09\n\t    E ==> F\n\n\t    %% \u70b9\u7dda\u306e\u77e2\u5370\uff08\u88dc\u8db3\u7684\u306a\u6d41\u308c\uff09\n\t    B -.-> F\n\n\t    %% \u53cc\u65b9\u5411\u306e\u77e2\u5370\uff08\u5faa\u74b0\uff09\n\t    E <--> C\n    <\/pre>\n\t<\/div>\n\t <\/div>\n<\/div>\n\n\n\nflowchart LR\n    %% \u30b5\u30d6\u30b0\u30e9\u30d5 1\uff1a\u51e6\u7406\u958b\u59cb\u301c\u5165\u529b\n    subgraph StartFlow [\u5165\u529b\u30d5\u30a7\u30fc\u30ba]\n        A([\u958b\u59cb\u30ce\u30fc\u30c9\uff08\u4e38\uff09])\n        B[\/\u5165\u529b\u30ce\u30fc\u30c9\uff08\u5e73\u884c\u56db\u8fba\u5f62\uff09\/]\n    end\n\n    %% \u30b5\u30d6\u30b0\u30e9\u30d5 2\uff1a\u51e6\u7406\n    subgraph ProcessingFlow [\u51e6\u7406\u30d5\u30a7\u30fc\u30ba]\n        C[\u51e6\u7406\u30ce\u30fc\u30c9\uff08\u89d2\u4e38\uff09]\n        D{{\u6761\u4ef6\u30ce\u30fc\u30c9\uff08\u3072\u3057\u5f62\uff09}}\n    end\n\n    %% \u30b5\u30d6\u30b0\u30e9\u30d5 3\uff1a\u51fa\u529b\u3068\u7d42\u4e86\n    subgraph OutputFlow [\u51fa\u529b\u30d5\u30a7\u30fc\u30ba]\n        E[\\\u51fa\u529b\u30ce\u30fc\u30c9\uff08\u5e73\u884c\u56db\u8fba\u5f62\uff09\\]\n        F([\u7d42\u4e86\u30ce\u30fc\u30c9\uff08\u4e38\uff09])\n    end\n\n    %% \u901a\u5e38\u306e\u77e2\u5370\n    A --> B\n    B --> C\n    C --> D\n\n    %% \u6761\u4ef6\u5206\u5c90\uff08\u306f\u3044\uff0f\u3044\u3044\u3048\uff09\n    D -- Yes --> E\n    D -- No --> C\n\n    %% \u592a\u7dda\u306e\u77e2\u5370\uff08\u91cd\u8981\u306a\u9077\u79fb\uff09\n    E ==> F\n\n    %% \u70b9\u7dda\u306e\u77e2\u5370\uff08\u88dc\u8db3\u7684\u306a\u6d41\u308c\uff09\n    B -.-> F\n\n    %% \u53cc\u65b9\u5411\u306e\u77e2\u5370\uff08\u5faa\u74b0\uff09\n    E <--> C\n <\/pre>\n
\n\u7b2c2\u7ae0\uff1a\u30b7\u30fc\u30b1\u30f3\u30b9\u56f3\u306e\u8a18\u8ff0\u65b9\u6cd5<\/h2>\n\u57fa\u672c\u7684\u306a\u69cb\u6587<\/p>\n
\n\t <\/div>\n\t\n\t\t\nsequenceDiagram\nparticipant Client\nparticipant Server\nparticipant Device\n\nClient->>+Server: Open  \/\/ Client\u304b\u3089Server\u3078\u30e1\u30c3\u30bb\u30fc\u30b8\u3001Server\u304c\u51e6\u7406\u958b\u59cb\nServer-->>-Client: Ok    \/\/ Server\u304b\u3089Client\u3078\u8fd4\u4fe1\u3001Server\u306eOpen\u51e6\u7406\u304c\u7d42\u4e86\u3001Client\u306e\u30e9\u30a4\u30d5\u30e9\u30a4\u30f3\u304c\u975e\u6d3b\u6027\u5316\n\nClient->>+Server: Print \/\/ Client\u304b\u3089Server\u3078\u30e1\u30c3\u30bb\u30fc\u30b8\u3001Server\u304cPrint\u51e6\u7406\u958b\u59cb\nServer->>+Device: Write \/\/ Server\u304b\u3089Device\u3078\u30e1\u30c3\u30bb\u30fc\u30b8\u3001Device\u304c\u51e6\u7406\u958b\u59cb\nDevice-->>-Server: Ok   \/\/ Device\u304b\u3089Server\u3078\u8fd4\u4fe1\u3001Device\u306e\u51e6\u7406\u7d42\u4e86\nServer-->>-Client: Ok   \/\/ Server\u304b\u3089Client\u3078\u6700\u7d42\u8fd4\u4fe1\u3001Server\u306ePrint\u51e6\u7406\u304c\u7d42\u4e86\u3001Client\u306e\u30e9\u30a4\u30d5\u30e9\u30a4\u30f3\u304c\u975e\u6d3b\u6027\u5316\n  \t\t<\/pre>\n\t<\/div>\n\t <\/div>\n<\/div>\n\n\nsequenceDiagram\n    participant Client\n    participant Server\n    participant Device\n\n    Client->>+Server: Open\n    Server-->>-Client: Ok\n\n    Client->>+Server: Print\n    Server->>+Device: Write\n    Device-->>-Server: Ok\n    Server-->>-Client: Ok\n<\/pre>\n
\n\u30e9\u30a4\u30d5\u30e9\u30a4\u30f3\u306e\u6d3b\u6027\u5316<\/p>\n
\n\t <\/div>\n\t\n\t\t\nsequenceDiagram\n  actor Client\n  actor Server\n  actor Device\n  Client->>+Server: \u5370\u5237\u51e6\u7406\u4f9d\u983c  \/\/ Client\u304cServer\u306b\u4f9d\u983c\u3057\u3001Server\u304c\u6d3b\u6027\u5316\n  Server->>+Device: \u5e33\u7968\u51fa\u529b      \/\/ Server\u304cDevice\u306b\u4f9d\u983c\u3057\u3001Device\u304c\u6d3b\u6027\u5316\n  Device-->>-Device: \u51e6\u7406\u5b9f\u884c     \/\/ (\u5fc5\u8981\u3067\u3042\u308c\u3070) Device\u5185\u90e8\u306e\u51e6\u7406\u3067\u81ea\u8eab\u304c\u6d3b\u6027\u5316\u3057\u305f\u5f8c\u3001\u975e\u6d3b\u6027\u5316\u3059\u308b\n  Device-->>Server: \u51fa\u529b\u5b8c\u4e86      \/\/ Device\u304cServer\u306b\u5b8c\u4e86\u3092\u901a\u77e5 (Server\u306f\u5f15\u304d\u7d9a\u304d\u6d3b\u6027\u72b6\u614b)\n  Server-->>-Client: \u5370\u5237\u304c\u5b8c\u4e86\u3057\u307e\u3057\u305f \/\/ Server\u304cClient\u306b\u6700\u7d42\u901a\u77e5\u3057\u3001Client\u304c\u975e\u6d3b\u6027\u5316\u3002\n                                    \/\/ \u3053\u306e\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u9001\u3063\u305f\u5f8c\u3001Server\u306e\u30e9\u30a4\u30d5\u30e9\u30a4\u30f3\u306f\u6697\u9ed9\u7684\u306b\u7d42\u4e86\u3057\u307e\u3059\u3002\n        <\/pre>\n\t<\/div>\n\t <\/div>\n<\/div>\n\n\n\nsequenceDiagram\n  actor Client\n  actor Server\n  actor Device\n  Client->>+Server: \u5370\u5237\u51e6\u7406\u4f9d\u983c\n  Server->>+Device: \u5e33\u7968\u51fa\u529b\n  Device-->>-Device: \u51e6\u7406\u5b9f\u884c\n  Device-->>Server: \u51fa\u529b\u5b8c\u4e86\n  Server-->>-Client: \u5370\u5237\u304c\u5b8c\u4e86\u3057\u307e\u3057\u305f\n<\/pre>\n
\n\nalt (\u9078\u629e)<\/p>\n
\n\t <\/div>\n\t\n\t\t\nsequenceDiagram\n    participant \u30e6\u30fc\u30b6\u30fc\n    participant \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\n    participant \u5916\u90e8\u30b5\u30fc\u30d3\u30b9\n\n    \u30e6\u30fc\u30b6\u30fc->>\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3: \u30c7\u30fc\u30bf\u9001\u4fe1 (\u8981\u6c42)\n\n    alt \u51e6\u7406\u304c\u5b8c\u5168\u306b\u6210\u529f\u3057\u305f\u5834\u5408\n        \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3->>\u5916\u90e8\u30b5\u30fc\u30d3\u30b9: API\u547c\u3073\u51fa\u3057\n        \u5916\u90e8\u30b5\u30fc\u30d3\u30b9-->>\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3: 200 OK\n        \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3-->>\u30e6\u30fc\u30b6\u30fc: \u51e6\u7406\u5b8c\u4e86 (\u6210\u529f\u30e1\u30c3\u30bb\u30fc\u30b8)\n    else \u5916\u90e8\u30b5\u30fc\u30d3\u30b9\u3067\u4e00\u90e8\u30a8\u30e9\u30fc\u304c\u3042\u3063\u305f\u5834\u5408\n        \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3->>\u5916\u90e8\u30b5\u30fc\u30d3\u30b9: API\u547c\u3073\u51fa\u3057\n        \u5916\u90e8\u30b5\u30fc\u30d3\u30b9-->>\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3: 206 Partial Content\n        \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3->>\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3: \u30a8\u30e9\u30fc\u30ed\u30b0\u8a18\u9332\n        \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3-->>\u30e6\u30fc\u30b6\u30fc: \u51e6\u7406\u5b8c\u4e86 (\u8b66\u544a\u30e1\u30c3\u30bb\u30fc\u30b8)\n    else \u305d\u306e\u4ed6\u306e\u4e88\u671f\u305b\u306c\u30a8\u30e9\u30fc\u306e\u5834\u5408\n        \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3->>\u5916\u90e8\u30b5\u30fc\u30d3\u30b9: API\u547c\u3073\u51fa\u3057\n        \u5916\u90e8\u30b5\u30fc\u30d3\u30b9-->>\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3: 500 Internal Server Error\n        \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3->>\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3: \u30a8\u30e9\u30fc\u901a\u77e5 (\u7ba1\u7406\u8005\u3078)\n        \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3-->>\u30e6\u30fc\u30b6\u30fc: \u51e6\u7406\u5931\u6557 (\u30a8\u30e9\u30fc\u30e1\u30c3\u30bb\u30fc\u30b8)\n    end\n\n    \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3->>\u30e6\u30fc\u30b6\u30fc: \u30ed\u30b0\u30a2\u30a6\u30c8\n          <\/pre>\n\t<\/div>\n\t <\/div>\n<\/div>\n\n\n\nsequenceDiagram\n    participant \u30e6\u30fc\u30b6\u30fc\n    participant \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\n    participant \u5916\u90e8\u30b5\u30fc\u30d3\u30b9\n\n    \u30e6\u30fc\u30b6\u30fc->>\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3: \u30c7\u30fc\u30bf\u9001\u4fe1 (\u8981\u6c42)\n\n    alt \u51e6\u7406\u304c\u5b8c\u5168\u306b\u6210\u529f\u3057\u305f\u5834\u5408\n        \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3->>\u5916\u90e8\u30b5\u30fc\u30d3\u30b9: API\u547c\u3073\u51fa\u3057\n        \u5916\u90e8\u30b5\u30fc\u30d3\u30b9-->>\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3: 200 OK\n        \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3-->>\u30e6\u30fc\u30b6\u30fc: \u51e6\u7406\u5b8c\u4e86 (\u6210\u529f\u30e1\u30c3\u30bb\u30fc\u30b8)\n    else \u5916\u90e8\u30b5\u30fc\u30d3\u30b9\u3067\u4e00\u90e8\u30a8\u30e9\u30fc\u304c\u3042\u3063\u305f\u5834\u5408\n        \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3->>\u5916\u90e8\u30b5\u30fc\u30d3\u30b9: API\u547c\u3073\u51fa\u3057\n        \u5916\u90e8\u30b5\u30fc\u30d3\u30b9-->>\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3: 206 Partial Content\n        \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3->>\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3: \u30a8\u30e9\u30fc\u30ed\u30b0\u8a18\u9332\n        \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3-->>\u30e6\u30fc\u30b6\u30fc: \u51e6\u7406\u5b8c\u4e86 (\u8b66\u544a\u30e1\u30c3\u30bb\u30fc\u30b8)\n    else \u305d\u306e\u4ed6\u306e\u4e88\u671f\u305b\u306c\u30a8\u30e9\u30fc\u306e\u5834\u5408\n        \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3->>\u5916\u90e8\u30b5\u30fc\u30d3\u30b9: API\u547c\u3073\u51fa\u3057\n        \u5916\u90e8\u30b5\u30fc\u30d3\u30b9-->>\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3: 500 Internal Server Error\n        \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3->>\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3: \u30a8\u30e9\u30fc\u901a\u77e5 (\u7ba1\u7406\u8005\u3078)\n        \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3-->>\u30e6\u30fc\u30b6\u30fc: \u51e6\u7406\u5931\u6557 (\u30a8\u30e9\u30fc\u30e1\u30c3\u30bb\u30fc\u30b8)\n    end\n\n    \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3->>\u30e6\u30fc\u30b6\u30fc: \u30ed\u30b0\u30a2\u30a6\u30c8\n<\/pre>\n
\n\u7b2c3\u7ae0\uff1a\u30af\u30e9\u30b9\u56f3\u306e\u8a18\u8ff0\u65b9\u6cd5<\/h2>\n\u30af\u30e9\u30b9\u306e\u5b9a\u7fa9\u3068\u95a2\u4fc2\u6027<\/p>\n
\n\t <\/div>\n\t\n\t\t\nclassDiagram\n    direction LR\n\n    %% Implementor (\u5b9f\u88c5\u8005) \u968e\u5c64 - \u5b9f\u73fe(Realization) \u3068 \u7d99\u627f(Inheritance)\n    class IRenderer {\n        <>\n        +renderCircle(radius: float)\n        +renderRectangle(width: float, height: float)\n    }\n    class VectorRenderer {\n        +renderCircle(radius: float)\n        +renderRectangle(width: float, height: float)\n    }\n    class RasterRenderer {\n        +renderCircle(radius: float)\n        +renderRectangle(width: float, height: float)\n    }\n    IRenderer <|.. VectorRenderer : \u5b9f\u73fe\n    IRenderer <|.. RasterRenderer : \u5b9f\u73fe\n\n    %% Abstraction (\u62bd\u8c61\u5316) \u968e\u5c64 - \u7d99\u627f(Inheritance)\n    class Shape {\n        <>\n        -IRenderer renderer\n        +draw()\n        +resize(factor: float)\n    }\n    class Circle {\n        -radius: float\n        +Circle(renderer: IRenderer, radius: float)\n        +draw()\n    }\n    class Rectangle {\n        -width: float\n        -height: float\n        +Rectangle(renderer: IRenderer, width: float, height: float)\n        +draw()\n    }\n    Shape <|-- Circle : \u7d99\u627f\n    Shape <|-- Rectangle : \u7d99\u627f\n\n    %% Composition (\u59d4\u8b72\/\u5408\u6210) - Shape\u304cIRenderer\u3092\u6301\u3064\n    Shape \"1\" *-- \"1\" IRenderer : \u59d4\u8b72\/\u5408\u6210\n\n    %% Aggregation (\u96c6\u7d04) - DrawingApplication\u304c\u8907\u6570\u306eShape\u3092\u6301\u3064\n    class DrawingApplication {\n        -shapes: List\n        +addShape(s: Shape)\n        +displayAllShapes()\n    }\n    DrawingApplication \"1\" o-- \"*\" Shape : \u96c6\u7d04\n```\n          <\/pre>\n\t<\/div>\n\t <\/div>\n<\/div>\n\n\n%%{init: {\"class\": {\"htmlLabels\": false}}}%%\nclassDiagram\n    direction LR\n    class IRenderer {\n        <<interface>>\n        +renderCircle(radius: float)\n        +renderRectangle(width: float, height: float)\n    }\n    class VectorRenderer {\n        +renderCircle(radius: float)\n        +renderRectangle(width: float, height: float)\n    }\n    class RasterRenderer {\n        +renderCircle(radius: float)\n        +renderRectangle(width: float, height: float)\n    }\n    IRenderer <|.. VectorRenderer : \u5b9f\u73fe\n    IRenderer <|.. RasterRenderer : \u5b9f\u73fe\n    class Shape {\n        <<abstract>>\n        -IRenderer renderer\n        +draw()\n        +resize(factor: float)\n    }\n    class Circle {\n        -radius: float\n        +Circle(renderer: IRenderer, radius: float)\n        +draw()\n    }\n    class Rectangle {\n        -width: float\n        -height: float\n        +Rectangle(renderer: IRenderer, width: float, height: float)\n        +draw()\n    }\n    Shape <|-- Circle : \u7d99\u627f\n    Shape <|-- Rectangle : \u7d99\u627f\n    Shape \"1\" *-- \"1\" IRenderer : \u59d4\u8b72\/\u5408\u6210\n    class DrawingApplication {\n        -shapes: List~Shape~\n        +addShape(s: Shape)\n        +displayAllShapes()\n    }\n    DrawingApplication \"1\" o-- \"*\" Shape : \u96c6\u7d04\n<\/pre>\n
\n\u7b2c4\u7ae0\uff1a\u30b9\u30c6\u30fc\u30c8\u56f3\u306e\u8a18\u8ff0\u65b9\u6cd5<\/h2>\n\u57fa\u672c\u7684\u306a\u69cb\u6587<\/p>\n
\n\t <\/div>\n\t\n\t\t\nstateDiagram-v2\n    [*] --> \u5f85\u6a5f\n    \u5f85\u6a5f --> \u5165\u91d1\u4e2d: \u30b3\u30a4\u30f3\u6295\u5165\n    \u5165\u91d1\u4e2d --> \u5165\u91d1\u4e2d: \u8ffd\u52a0\u30b3\u30a4\u30f3\u6295\u5165\n    \u5165\u91d1\u4e2d --> \u5546\u54c1\u6392\u51fa: [\u91d1\u984d\u5145\u8db3] \u5546\u54c1\u9078\u629e\n    \u5165\u91d1\u4e2d --> \u304a\u3064\u308a\u8fd4\u5374: \u8fd4\u5374\u64cd\u4f5c\n    \u5546\u54c1\u6392\u51fa --> \u304a\u3064\u308a\u8fd4\u5374: \u304a\u3064\u308a\u6709\u308a\n    \u5546\u54c1\u6392\u51fa --> \u5f85\u6a5f: \u304a\u3064\u308a\u7121\u3057\n    \u304a\u3064\u308a\u8fd4\u5374 --> \u5f85\u6a5f: \u8fd4\u5374\u5b8c\u4e86\n        <\/pre>\n\t<\/div>\n\t <\/div>\n<\/div>\n\n\nstateDiagram-v2\n    [*] --> \u5f85\u6a5f\n    \u5f85\u6a5f --> \u5165\u91d1\u4e2d: \u30b3\u30a4\u30f3\u6295\u5165\n    \u5165\u91d1\u4e2d --> \u5165\u91d1\u4e2d: \u8ffd\u52a0\u30b3\u30a4\u30f3\u6295\u5165\n    \u5165\u91d1\u4e2d --> \u5546\u54c1\u6392\u51fa: [\u91d1\u984d\u5145\u8db3] \u5546\u54c1\u9078\u629e\n    \u5165\u91d1\u4e2d --> \u304a\u3064\u308a\u8fd4\u5374: \u8fd4\u5374\u64cd\u4f5c\n    \u5546\u54c1\u6392\u51fa --> \u304a\u3064\u308a\u8fd4\u5374: \u304a\u3064\u308a\u6709\u308a\n    \u5546\u54c1\u6392\u51fa --> \u5f85\u6a5f: \u304a\u3064\u308a\u7121\u3057\n    \u304a\u3064\u308a\u8fd4\u5374 --> \u5f85\u6a5f: \u8fd4\u5374\u5b8c\u4e86\n<\/pre>\n
\n\u8907\u5408\u72b6\u614b<\/p>\n
\n\t <\/div>\n\t\n\t\t\nstateDiagram-v2\n    [*] --> \u505c\u6b62\u4e2d\n    \u505c\u6b62\u4e2d --> \u8d70\u884c\u4e2d: \u30a2\u30af\u30bb\u30ebON\n    \n    state \u8d70\u884c\u4e2d {\n        direction LR\n        [*] --> \u4f4e\u901f\n        \u4f4e\u901f --> \u4e2d\u901f: \u52a0\u901f\n        \u4e2d\u901f --> \u9ad8\u901f: \u3055\u3089\u306b\u52a0\u901f\n        \u9ad8\u901f --> \u4e2d\u901f: \u6e1b\u901f\n        \u4e2d\u901f --> \u4f4e\u901f: \u3055\u3089\u306b\u6e1b\u901f\n    }\n\n    \u8d70\u884c\u4e2d --> \u505c\u6b62\u4e2d: \u30d6\u30ec\u30fc\u30ad\n        <\/pre>\n\t<\/div>\n\t <\/div>\n<\/div>\n\n\nstateDiagram-v2\n    [*] --> \u505c\u6b62\u4e2d\n    \u505c\u6b62\u4e2d --> \u8d70\u884c\u4e2d: \u30a2\u30af\u30bb\u30ebON\n    \n    state \u8d70\u884c\u4e2d {\n        direction LR\n        [*] --> \u4f4e\u901f\n        \u4f4e\u901f --> \u4e2d\u901f: \u52a0\u901f\n        \u4e2d\u901f --> \u9ad8\u901f: \u3055\u3089\u306b\u52a0\u901f\n        \u9ad8\u901f --> \u4e2d\u901f: \u6e1b\u901f\n        \u4e2d\u901f --> \u4f4e\u901f: \u3055\u3089\u306b\u6e1b\u901f\n    }\n\n    \u8d70\u884c\u4e2d --> \u505c\u6b62\u4e2d: \u30d6\u30ec\u30fc\u30ad\n<\/pre>\n
\n\n\u7b2c5\u7ae0\uff1a\u30de\u30a4\u30f3\u30c9\u30de\u30c3\u30d7\u306e\u8a18\u8ff0\u65b9\u6cd5<\/h2>\n\u57fa\u672c\u7684\u306a\u69cb\u6587<\/p>\n
\n\t <\/div>\n\t\n\t\t\nmindmap\n  root((Mermaid.js \u30ac\u30a4\u30c9))\n    \u306f\u3058\u3081\u306b\n    \u30d5\u30ed\u30fc\u30c1\u30e3\u30fc\u30c8\n      \u57fa\u672c\u7684\u306a\u69cb\u6587\n      \u30b5\u30d6\u30b0\u30e9\u30d5\n      \u5fc5\u9808\u30c6\u30fc\u30d6\u30eb: \u30ce\u30fc\u30c9\u56f3\u5f62\n      \u5fc5\u9808\u30c6\u30fc\u30d6\u30eb: \u77e2\u5370\u306e\u7a2e\u985e\n    \u30b7\u30fc\u30b1\u30f3\u30b9\u56f3\n      \u57fa\u672c\u7684\u306a\u69cb\u6587\n      \u30e9\u30a4\u30d5\u30e9\u30a4\u30f3\u306e\u6d3b\u6027\u5316\n      alt (\u9078\u629e)\n    \u30af\u30e9\u30b9\u56f3\n      \u30af\u30e9\u30b9\u306e\u5b9a\u7fa9\u3068\u95a2\u4fc2\u6027\n      \u5fc5\u9808\u30c6\u30fc\u30d6\u30eb: \u95a2\u4fc2\u6027\u3068\u53ef\u8996\u6027\n    \u30b9\u30c6\u30fc\u30c8\u56f3\n      \u57fa\u672c\u7684\u306a\u69cb\u6587\n      \u8907\u5408\u72b6\u614b\n    \u30de\u30a4\u30f3\u30c9\u30de\u30c3\u30d7\n      \u57fa\u672c\u7684\u306a\u69cb\u6587\u3068\u56f3\u5f62\n      \u5fc5\u9808\u30c6\u30fc\u30d6\u30eb: \u30ce\u30fc\u30c9\u56f3\u5f62\n      \u30ce\u30fc\u30c9\u5f62\u72b6\u306e\u4f8b\n        \u56db\u89d2\u5f62\u30ce\u30fc\u30c9[\u4f8b\uff1a\u56db\u89d2\u5f62]\n        \u5186\u5f62\u30ce\u30fc\u30c9((\u4f8b\uff1a\u5186\u5f62))\n        \u96f2\u5f62\u30ce\u30fc\u30c9)\u4f8b\uff1a\u96f2\u5f62(\n    \u8981\u4ef6\u56f3\n      \u57fa\u672c\u7684\u306a\u69cb\u6587\n    \u30ab\u30b9\u30bf\u30de\u30a4\u30ba\n      \u30c6\u30fc\u30de\u306e\u5909\u66f4\n      `classDef`\u306b\u3088\u308b\u30af\u30e9\u30b9\u5b9a\u7fa9\u3068\u9069\u7528\n      `linkStyle`\u306b\u3088\u308b\u77e2\u5370\u30b9\u30bf\u30a4\u30eb\u5909\u66f4\n    \u307e\u3068\u3081\n        <\/pre>\n\t<\/div>\n\t <\/div>\n<\/div>\n\n\nmindmap\n  root((Mermaid.js \u30ac\u30a4\u30c9))\n    \u306f\u3058\u3081\u306b\n    \u30d5\u30ed\u30fc\u30c1\u30e3\u30fc\u30c8\n      \u57fa\u672c\u7684\u306a\u69cb\u6587\n      \u30b5\u30d6\u30b0\u30e9\u30d5\n      \u5fc5\u9808\u30c6\u30fc\u30d6\u30eb: \u30ce\u30fc\u30c9\u56f3\u5f62\n      \u5fc5\u9808\u30c6\u30fc\u30d6\u30eb: \u77e2\u5370\u306e\u7a2e\u985e\n    \u30b7\u30fc\u30b1\u30f3\u30b9\u56f3\n      \u57fa\u672c\u7684\u306a\u69cb\u6587\n      \u30e9\u30a4\u30d5\u30e9\u30a4\u30f3\u306e\u6d3b\u6027\u5316\n      alt (\u9078\u629e)\n    \u30af\u30e9\u30b9\u56f3\n      \u30af\u30e9\u30b9\u306e\u5b9a\u7fa9\u3068\u95a2\u4fc2\u6027\n      \u5fc5\u9808\u30c6\u30fc\u30d6\u30eb: \u95a2\u4fc2\u6027\u3068\u53ef\u8996\u6027\n    \u30b9\u30c6\u30fc\u30c8\u56f3\n      \u57fa\u672c\u7684\u306a\u69cb\u6587\n      \u8907\u5408\u72b6\u614b\n    \u30de\u30a4\u30f3\u30c9\u30de\u30c3\u30d7\n      \u57fa\u672c\u7684\u306a\u69cb\u6587\u3068\u56f3\u5f62\n      \u5fc5\u9808\u30c6\u30fc\u30d6\u30eb: \u30ce\u30fc\u30c9\u56f3\u5f62\n      \u30ce\u30fc\u30c9\u5f62\u72b6\u306e\u4f8b\n        \u56db\u89d2\u5f62\u30ce\u30fc\u30c9[\u4f8b\uff1a\u56db\u89d2\u5f62]\n        \u5186\u5f62\u30ce\u30fc\u30c9((\u4f8b\uff1a\u5186\u5f62))\n        \u96f2\u5f62\u30ce\u30fc\u30c9)\u4f8b\uff1a\u96f2\u5f62(\n    \u8981\u4ef6\u56f3\n      \u57fa\u672c\u7684\u306a\u69cb\u6587\n    \u30ab\u30b9\u30bf\u30de\u30a4\u30ba\n      \u30c6\u30fc\u30de\u306e\u5909\u66f4\n      `classDef`\u306b\u3088\u308b\u30af\u30e9\u30b9\u5b9a\u7fa9\u3068\u9069\u7528\n      `linkStyle`\u306b\u3088\u308b\u77e2\u5370\u30b9\u30bf\u30a4\u30eb\u5909\u66f4\n    \u307e\u3068\u3081\n<\/pre>\n
\n\u7b2c6\u7ae0\uff1a\u8981\u4ef6\u5b9a\u7fa9\u306e\u8a18\u8ff0\u65b9\u6cd5<\/h2>\n\u57fa\u672c\u7684\u306a\u69cb\u6587<\/p>\n
\n\t <\/div>\n\t\n\t\t\nrequirementDiagram\n\n    requirement loginProc {\n        id: \"REQ_LOGIN\"\n        text: \"\u30e6\u30fc\u30b6\u30fc\u30ed\u30b0\u30a4\u30f3\u51e6\u7406\"\n    }\n\n    functionalRequirement inputCredentials {\n        id: \"REQ_INPUT\"\n        text: \"\u8a8d\u8a3c\u60c5\u5831\u5165\u529b\"\n    }\n\n    functionalRequirement validateCredentials {\n        id: \"REQ_VALIDATE\"\n        text: \"\u8a8d\u8a3c\u60c5\u5831\u691c\u8a3c\"\n    }\n\n    functionalRequirement loginSuccess {\n        id: \"REQ_SUCCESS\"\n        text: \"\u30ed\u30b0\u30a4\u30f3\u6210\u529f\"\n    }\n\n    functionalRequirement loginFailure {\n        id: \"REQ_FAILURE\"\n        text: \"\u30ed\u30b0\u30a4\u30f3\u5931\u6557\"\n    }\n\n    element loginUI {\n        type: \"UI\"\n        docRef: \"\u30ed\u30b0\u30a4\u30f3\u753b\u9762\"\n    }\n\n    element authSystem {\n        type: \"System\"\n        docRef: \"\u8a8d\u8a3c\u30b7\u30b9\u30c6\u30e0\"\n    }\n\n    loginProc - contains -> inputCredentials\n    loginProc - contains -> validateCredentials\n    validateCredentials - contains -> loginSuccess\n    validateCredentials - contains -> loginFailure\n\n    loginUI - satisfies -> inputCredentials\n    authSystem - satisfies -> validateCredentials\n        <\/pre>\n\t<\/div>\n\t <\/div>\n<\/div>\n\n\nrequirementDiagram\n\n    requirement loginProc {\n        id: \"REQ_LOGIN\"\n        text: \"\u30e6\u30fc\u30b6\u30fc\u30ed\u30b0\u30a4\u30f3\u51e6\u7406\"\n    }\n\n    functionalRequirement inputCredentials {\n        id: \"REQ_INPUT\"\n        text: \"\u8a8d\u8a3c\u60c5\u5831\u5165\u529b\"\n    }\n\n    functionalRequirement validateCredentials {\n        id: \"REQ_VALIDATE\"\n        text: \"\u8a8d\u8a3c\u60c5\u5831\u691c\u8a3c\"\n    }\n\n    functionalRequirement loginSuccess {\n        id: \"REQ_SUCCESS\"\n        text: \"\u30ed\u30b0\u30a4\u30f3\u6210\u529f\"\n    }\n\n    functionalRequirement loginFailure {\n        id: \"REQ_FAILURE\"\n        text: \"\u30ed\u30b0\u30a4\u30f3\u5931\u6557\"\n    }\n\n    element loginUI {\n        type: \"UI\"\n        docRef: \"\u30ed\u30b0\u30a4\u30f3\u753b\u9762\"\n    }\n\n    element authSystem {\n        type: \"System\"\n        docRef: \"\u8a8d\u8a3c\u30b7\u30b9\u30c6\u30e0\"\n    }\n\n    loginProc - contains -> inputCredentials\n    loginProc - contains -> validateCredentials\n    validateCredentials - contains -> loginSuccess\n    validateCredentials - contains -> loginFailure\n\n    loginUI - satisfies -> inputCredentials\n    authSystem - satisfies -> validateCredentials\n<\/pre>\n
\n\u7b2c7\u7ae0\uff1aER\u56f3\u306e\u8a18\u8ff0\u65b9\u6cd5<\/h2>\n\u57fa\u672c\u7684\u306a\u69cb\u6587<\/p>\n
\n\t <\/div>\n\t\n\t\t\nerDiagram\n    EMPLOYEE {\n        int employee_id PK \"\u793e\u54e1\u756a\u53f7\"\n        string name \"\u6c0f\u540d\"\n        string name_kana \"\u304b\u306a\u6c0f\u540d\"\n        string email UK \"\u30e1\u30fc\u30eb\u30a2\u30c9\u30ec\u30b9\"\n        string phone_number \"\u96fb\u8a71\u756a\u53f7\"\n        date hire_date \"\u5165\u793e\u5e74\u6708\u65e5\"\n        date date_of_birth \"\u751f\u5e74\u6708\u65e5\"\n        string gender \"\u6027\u5225\"\n        string address \"\u4f4f\u6240\"\n        date resignation_date \"\u9000\u8077\u5e74\u6708\u65e5\"\n        int department_id FK \"\u90e8\u7f72ID\"\n        int position_id FK \"\u5f79\u8077ID\"\n        int employment_status_id FK \"\u96c7\u7528\u5f62\u614bID\"\n    }\n    DEPARTMENT {\n        int department_id PK \"\u90e8\u7f72ID\"\n        string department_name \"\u90e8\u7f72\u540d\"\n    }\n    POSITION {\n        int position_id PK \"\u5f79\u8077ID\"\n        string position_name \"\u5f79\u8077\u540d\"\n    }\n    EMPLOYMENT_STATUS {\n        int employment_status_id PK \"\u96c7\u7528\u5f62\u614bID\"\n        string status_name \"\u96c7\u7528\u5f62\u614b\u540d\"\n    }\n\n    DEPARTMENT ||--|{ EMPLOYEE : \"\u6240\u5c5e\"\n    POSITION ||--|{ EMPLOYEE : \"\u62c5\u5f53\"\n    EMPLOYMENT_STATUS ||--|{ EMPLOYEE : \"\u533a\u5206\"\n        <\/pre>\n\t<\/div>\n\t <\/div>\n<\/div>\n\n\nerDiagram\n    EMPLOYEE {\n        int employee_id PK \"\u793e\u54e1\u756a\u53f7\"\n        string name \"\u6c0f\u540d\"\n        string name_kana \"\u304b\u306a\u6c0f\u540d\"\n        string email UK \"\u30e1\u30fc\u30eb\u30a2\u30c9\u30ec\u30b9\"\n        string phone_number \"\u96fb\u8a71\u756a\u53f7\"\n        date hire_date \"\u5165\u793e\u5e74\u6708\u65e5\"\n        date date_of_birth \"\u751f\u5e74\u6708\u65e5\"\n        string gender \"\u6027\u5225\"\n        string address \"\u4f4f\u6240\"\n        date resignation_date \"\u9000\u8077\u5e74\u6708\u65e5\"\n        int department_id FK \"\u90e8\u7f72ID\"\n        int position_id FK \"\u5f79\u8077ID\"\n        int employment_status_id FK \"\u96c7\u7528\u5f62\u614bID\"\n    }\n    DEPARTMENT {\n        int department_id PK \"\u90e8\u7f72ID\"\n        string department_name \"\u90e8\u7f72\u540d\"\n    }\n    POSITION {\n        int position_id PK \"\u5f79\u8077ID\"\n        string position_name \"\u5f79\u8077\u540d\"\n    }\n    EMPLOYMENT_STATUS {\n        int employment_status_id PK \"\u96c7\u7528\u5f62\u614bID\"\n        string status_name \"\u96c7\u7528\u5f62\u614b\u540d\"\n    }\n\n    DEPARTMENT ||--|{ EMPLOYEE : \"\u6240\u5c5e\"\n    POSITION ||--|{ EMPLOYEE : \"\u62c5\u5f53\"\n    EMPLOYMENT_STATUS ||--|{ EMPLOYEE : \"\u533a\u5206\"\n<\/pre>\n
\n\n\n\n\n