mermaid-js · teyc · Dec 17, 2024 · Dec 18, 2024 · Dec 19, 2024 · Dec 19, 2024
diff --git a/.build/jsonSchema.ts b/.build/jsonSchema.ts
@@ -24,6 +24,7 @@ const MERMAID_CONFIG_DIAGRAM_KEYS = [
   'gitGraph',
   'c4',
   'sankey',
+  'usecase',
   'block',
   'packet',
   'architecture',

diff --git a/.cspell/code-terms.txt b/.cspell/code-terms.txt
@@ -125,6 +125,7 @@ Subschemas
 substr
 SVGG
 SVGSVG
+systemboundary
 TAGEND
 TAGSTART
 techn
@@ -142,6 +143,7 @@ typeof
 typestr
 unshift
 urlsafe
+usecase
 verifymethod
 VERIFYMTHD
 WARN_DOCSDIR_DOESNT_MATCH

diff --git a/demos/index.html b/demos/index.html
@@ -82,6 +82,9 @@ <h2><a href="./zenuml.html">ZenUML</a></h2>
       <li>
         <h2><a href="./sankey.html">Sankey</a></h2>
       </li>
+      <li>
+        <h2><a href="./usecase.html">Use Case</a></h2>
+      </li>
       <li>
         <h2><a href="./packet.html">Packet</a></h2>
       </li>

diff --git a/demos/usecase.html b/demos/usecase.html
@@ -0,0 +1,194 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Use case tests</title>
+    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
+    <style>
+      body {
+        font-family: 'Roboto', sans-serif;
+        padding: 20px;
+      }
+      hr {
+        color: black;
+        clear: both;
+      }
+      div.mermaid {
+        /* font-family: 'trebuchet ms', verdana, arial; */
+        font-family: 'Courier New', Courier, monospace !important;
+        max-width: 50%;
+      }
+      pre {
+        float: left;
+        max-width: 50%;
+        height: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <h2>Basic Use Case</h2>
+    <pre class="mermaid">
+    usecase-beta
+      User -> (Open Bank Account)
+      User --> (Get Loan)
+      (Get Loan) --> (Credit Check)
+    </pre>
+    <pre class="mermaid-example">
+      usecase-beta
+        User -> (Open Bank Account)
+        User --> (Get Loan)
+        (Get Loan) --> (Credit Check)
+      </pre
+    >
+    <hr />
+
+    <h2>Use Case with Title and Aliases</h2>
+    <pre class="mermaid">
+      usecase-beta
+          title  Simple use case
+          systemboundary
+            title Acme System
+            (Start)
+            (Use) as (Use the application)
+            (Another use case)
+          end
+          User -> (Start)
+          User --> (Use)
+          (Use) -- extends --> (Another use case)
+    </pre>
+    <pre class="mermaid-example">
+      usecase-beta
+          title  Simple use case
+          systemboundary
+            title Acme System
+            (Start)
+            (Use) as (Use the application)
+            (Another use case)
+          end
+          User -> (Start)
+          User --> (Use)
+          (Use) -- extends --> (Another use case)
+    </pre>
+    <hr />
+
+    <h2>Complex Use Case</h2>
+    <pre id="complex" class="mermaid">
+      %% { init: { 'theme': 'forest' } } %%
+      usecase-beta
+      title Student Management System Use Cases
+
+      actor Student
+      actor Admin
+      service Authentication
+      service Grades
+      service Courses
+
+      systemboundary
+        title Student Management System
+        (Login) {
+          - Authenticate
+        }
+        (Submit Assignment) {
+          - Upload Assignment
+        }
+        (View Grades)
+        (Manage Users) {
+          - Add User
+          - Edit User
+          - Delete User
+        }
+        (Manage Courses) {
+          - Add Course
+          - Edit Course
+          - Delete Course
+        }
+        (Generate Reports) {
+          - Generate User Report
+          - Generate Course Report
+        }
+        (View Grades) {
+          - View User Grades
+          - View Course Grades
+        }
+      end
+
+      Student -> (Login) -> Authentication
+      Student -> (Submit Assignment) -> Courses
+      Student -> (View Grades) -> Grades
+      Admin -> (Login) -> Authentication
+      Admin -> (Manage Users) -> Courses
+      Admin -> (Manage Courses) -> Courses
+      Admin -> (Generate Reports) -> Courses, Grades
+      Admin -> (View Grades) -> Grades
+    </pre>
+    <pre id="complex-example" class="mermaid-example">
+      %% { init: { 'theme': 'forest' } } %%
+      usecase-beta
+      title Student Management System Use Cases
+
+      actor Student
+      actor Admin
+      service Authentication
+      service Grades
+      service Courses
+
+      systemboundary
+        title Student Management System
+        (Login) {
+          - Authenticate
+        }
+        (Submit Assignment) {
+          - Upload Assignment
+        }
+        (View Grades)
+        (Manage Users) {
+          - Add User
+          - Edit User
+          - Delete User
+        }
+        (Manage Courses) {
+          - Add Course
+          - Edit Course
+          - Delete Course
+        }
+        (Generate Reports) {
+          - Generate User Report
+          - Generate Course Report
+        }
+        (View Grades) {
+          - View User Grades
+          - View Course Grades
+        }
+      end
+
+      Student -> (Login) -> Authentication
+      Student -> (Submit Assignment) -> Courses
+      Student -> (View Grades) -> Grades
+      Admin -> (Login) -> Authentication
+      Admin -> (Manage Users) -> Courses
+      Admin -> (Manage Courses) -> Courses
+      Admin -> (Generate Reports) -> Courses, Grades
+      Admin -> (View Grades) -> Grades
+    </pre>
+
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
+      mermaid.initialize({
+        logLevel: 3,
+        securityLevel: 'loose',
+        flowchart: { curve: 'basis' },
+      });
+    </script>
+    <script>
+      function testClick(nodeId) {
+        console.log('clicked', nodeId);
+        let originalBgColor = document.querySelector('body').style.backgroundColor;
+        document.querySelector('body').style.backgroundColor = 'yellow';
+        setTimeout(function () {
+          document.querySelector('body').style.backgroundColor = originalBgColor;
+        }, 100);
+      }
+    </script>
+  </body>
+</html>
diff --git a/docs/config/setup/interfaces/mermaid.MermaidConfig.md b/docs/config/setup/interfaces/mermaid.MermaidConfig.md
@@ -49,7 +49,7 @@ This matters if you are using base tag settings.
 
 #### Defined in
 
-[packages/mermaid/src/config.type.ts:201](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L201)
+[packages/mermaid/src/config.type.ts:202](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L202)
 
 ---
 
@@ -121,7 +121,7 @@ should not change unless content is changed.
 
 #### Defined in
 
-[packages/mermaid/src/config.type.ts:202](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L202)
+[packages/mermaid/src/config.type.ts:203](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L203)
 
 ---
 
@@ -183,7 +183,7 @@ See <https://developer.mozilla.org/en-US/docs/Web/CSS/font-family>
 
 #### Defined in
 
-[packages/mermaid/src/config.type.ts:204](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L204)
+[packages/mermaid/src/config.type.ts:205](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L205)
 
 ---
 
@@ -320,7 +320,7 @@ Defines which main look to use for the diagram.
 
 #### Defined in
 
-[packages/mermaid/src/config.type.ts:205](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L205)
+[packages/mermaid/src/config.type.ts:206](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L206)
 
 ---
 
@@ -364,7 +364,7 @@ The maximum allowed size of the users text diagram
 
 #### Defined in
 
-[packages/mermaid/src/config.type.ts:200](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L200)
+[packages/mermaid/src/config.type.ts:201](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L201)
 
 ---
 
@@ -475,7 +475,7 @@ This is useful when you want to control how to handle syntax errors in your appl
 
 #### Defined in
 
-[packages/mermaid/src/config.type.ts:211](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L211)
+[packages/mermaid/src/config.type.ts:212](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L212)
 
 ---
 
@@ -522,13 +522,23 @@ You may also use `themeCSS` to override this value.
 
 ---
 
+### usecase
+
+• `Optional` **usecase**: `UsecaseDiagramConfig`
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:200](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L200)
+
+---
+
 ### wrap
 
 • `Optional` **wrap**: `boolean`
 
 #### Defined in
 
-[packages/mermaid/src/config.type.ts:203](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L203)
+[packages/mermaid/src/config.type.ts:204](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L204)
 
 ---
 

diff --git a/docs/intro/index.md b/docs/intro/index.md
@@ -287,6 +287,36 @@ quadrantChart
     Campaign F: [0.35, 0.78]
 ```
 
+### [Use Case](../syntax/usecase.md)
+
+```mermaid-example
+usecase-beta
+    title Simple Use Case
+    systemboundary
+        title Acme System
+        (Start)
+        (Use) as (Use the application)
+        (Another use case)
+    end
+    User -> (Start)
+    User --> (Use)
+    (Use) --> (Another use case)
+```
+
+```mermaid
+usecase-beta
+    title Simple Use Case
+    systemboundary
+        title Acme System
+        (Start)
+        (Use) as (Use the application)
+        (Another use case)
+    end
+    User -> (Start)
+    User --> (Use)
+    (Use) --> (Another use case)
+```
+
 ### [XY Chart](../syntax/xyChart.md)
 
 ```mermaid-example

diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md
@@ -318,6 +318,7 @@ Below is a comprehensive list of the newly introduced shapes and their correspon
 
 | **Semantic Name**                 | **Shape Name**         | **Short Name** | **Description**                | **Alias Supported**                                              |
 | --------------------------------- | ---------------------- | -------------- | ------------------------------ | ---------------------------------------------------------------- |
+| Actor                             | Actor                  | `actor`        | Actor used in Use Cases        | `stickman`                                                       |
 | Card                              | Notched Rectangle      | `notch-rect`   | Represents a card              | `card`, `notched-rectangle`                                      |
 | Collate                           | Hourglass              | `hourglass`    | Represents a collate operation | `collate`, `hourglass`                                           |
 | Com Link                          | Lightning Bolt         | `bolt`         | Communication link             | `com-link`, `lightning-bolt`                                     |
-Original file line number
+Diff line change
@@ Expand Up / @@ -82,6 +82,9 @@ <h2><a href="./zenuml.html">ZenUML</a></h2> @@
           <li>
             <h2><a href="./sankey.html">Sankey</a></h2>
           </li>
+          <li>
+            <h2><a href="./usecase.html">Use Case</a></h2>
+          </li>
           <li>
             <h2><a href="./packet.html">Packet</a></h2>
           </li>
@@ Expand Down @@