diff --git a/.cspell/code-terms.txt b/.cspell/code-terms.txt index 58167ce7c2..e58cb9b1d9 100644 --- a/.cspell/code-terms.txt +++ b/.cspell/code-terms.txt @@ -125,6 +125,7 @@ Subschemas substr SVGG SVGSVG +systemboundary TAGEND TAGSTART techn diff --git a/docs/syntax/usecase.md b/docs/syntax/usecase.md new file mode 100644 index 0000000000..5178f1a326 --- /dev/null +++ b/docs/syntax/usecase.md @@ -0,0 +1,219 @@ +> **Warning** +> +> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. +> +> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/usecase.md](../../packages/mermaid/src/docs/syntax/usecase.md). + +# Use Case Diagram + +> In the context of mermaid-js, the Use Case diagram is a powerful tool for visualizing the interactions between actors and use cases within a system. It helps in understanding the functional requirements and the relationships between different components of the system. + +## Example + +```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) +``` + +## Syntax + +### Title + +The title is a short description of the diagram and it will always render on top of the diagram. + +#### Example + +```mermaid-example +usecase-beta + title Arrows in Use Case diagrams + 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 +``` + +```mermaid +usecase-beta + title Arrows in Use Case diagrams + 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 +``` + +### System Boundary + +The system boundary groups related use cases together and provides a title for the group. + +#### Example + +```mermaid-example +usecase-beta + systemboundary + title "Acme System" + (Start) + (Use) as (Use the application) + (Another use case) + end +``` + +```mermaid +usecase-beta + systemboundary + title "Acme System" + (Start) + (Use) as (Use the application) + (Another use case) + end +``` + +### Actors and Services + +Actors and services represent the entities that interact with the use cases. + +#### Example + +```mermaid-example +usecase-beta + actor Student + actor Admin + service Authentication + service Grades + service Courses +``` + +```mermaid +usecase-beta + actor Student + actor Admin + service Authentication + service Grades + service Courses +``` + +### Relationships + +Relationships define the interactions between actors, services, and use cases. + +#### Example + +```mermaid-example +usecase-beta + 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 +``` + +```mermaid +usecase-beta + 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 +``` diff --git a/packages/mermaid/src/docs/syntax/usecase.md b/packages/mermaid/src/docs/syntax/usecase.md new file mode 100644 index 0000000000..b5abfa756e --- /dev/null +++ b/packages/mermaid/src/docs/syntax/usecase.md @@ -0,0 +1,122 @@ +# Use Case Diagram + +> In the context of mermaid-js, the Use Case diagram is a powerful tool for visualizing the interactions between actors and use cases within a system. It helps in understanding the functional requirements and the relationships between different components of the system. + +## Example + +```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) +``` + +## Syntax + +### Title + +The title is a short description of the diagram and it will always render on top of the diagram. + +#### Example + +```mermaid-example +usecase-beta + title Arrows in Use Case diagrams + 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 +``` + +### System Boundary + +The system boundary groups related use cases together and provides a title for the group. + +#### Example + +```mermaid-example +usecase-beta + systemboundary + title "Acme System" + (Start) + (Use) as (Use the application) + (Another use case) + end +``` + +### Actors and Services + +Actors and services represent the entities that interact with the use cases. + +#### Example + +```mermaid-example +usecase-beta + actor Student + actor Admin + service Authentication + service Grades + service Courses +``` + +### Relationships + +Relationships define the interactions between actors, services, and use cases. + +#### Example + +```mermaid-example +usecase-beta + 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 +```