EasyPageGO
Get Your Docs

Mermaid Graphs

When it comes to conveying complex concepts in your documentation, Mermaid graphs are an essential tool. EasyPageGO makes it simple to create and edit these diagrams directly within the editor, helping you visualize your ideas effectively.

Directly Editable in the Editor

One of the standout features of Mermaid graphs in EasyPageGO is the ability to edit them directly within the editor. This real-time editing capability allows you to make adjustments on the fly, ensuring that your diagrams are always current and accurately reflect your product's concepts.

Customizable Graph Sizing

While editing each graph in EasyPageGO, you have the flexibility to adjust its size directly within the editor. This allows you to determine the optimal dimensions for your diagrams, ensuring they fit seamlessly into your content. The final output automatically accounts for the space required by each graph, helping to achieve the best possible score for Cumulative Layout Shift (CLS). By reserving space for your graphs upfront, EasyPageGO ensures that your pages remain stable and visually consistent, enhancing both user experience and SEO performance.

19 Different Diagrams

Mermaid supports a wide variety of diagram types, giving you the flexibility to choose the best representation for your information. With 19 different diagram options, you can create everything from flowcharts and sequence diagrams to Gantt charts and class diagrams. This versatility helps you effectively communicate intricate ideas and processes in a visually compelling way.

Flowchart

A flowchart is a visual representation of a process or workflow, using symbols and arrows to illustrate the sequence of steps and decisions involved. It simplifies complex processes by breaking them down into manageable parts, making it easier to understand and communicate how a system operates.

Flowcharts are particularly useful in project management, software development, and process improvement to map out procedures, identify bottlenecks, and clarify roles and responsibilities.

```mermaid flowchart TD A[Start] --> B{Is API Key Valid?} B -->|Yes| C[Make API Request] C --> F{Success?} F --> |Yes| G[Display results] F --> |No| H[Display error] B -->|No| H ```

Read the official docs.

Sequence

A sequence diagram illustrates how objects or components interact in a specific sequence over time. It visually represents the order of messages exchanged between participants, showing the flow of control and data within a system. Sequence diagrams are especially useful for modeling dynamic behavior, such as software design, API interactions, and user authentication processes.

They help clarify the sequence of events and interactions between components, ensuring a shared understanding of complex processes.

```mermaid sequenceDiagram participant User participant Client participant AuthServer as Authorization Server participant ResourceServer as Resource Server User->>Client: Request Authentication Client->>AuthServer: Request Token AuthServer-->>Client: Return Token Client->>ResourceServer: Request Resource with Token ResourceServer-->>Client: Return Resource Client-->>User: Provide Resource ```

Read the official docs.

State

A state diagram is a visual representation of the different states an object or system can be in, and how it transitions between these states in response to various events or conditions. Each state represents a particular condition or situation, and arrows (transitions) show how and when the system moves from one state to another.

```mermaid stateDiagram-v2 [*] --> Red Red --> Green : Timer expires Green --> Orange : Timer expires Orange --> Red : Timer expires ```

Read the official docs.

Class

A class diagram represents the classes, interfaces, and their relationships within a system. It illustrates the attributes and methods of each class, as well as the associations, inheritances, and dependencies between them.

Class diagrams are essential in object-oriented design and programming, helping developers understand the system's architecture and how different components interact. They are particularly useful when designing new systems, documenting existing code, or communicating the structure of software applications to stakeholders.

```mermaid classDiagram class ApiClient { +String baseUrl +String apiKey +connect() +getRequest(endpoint: String) +postRequest(endpoint: String, data: Object) +handleResponse(response: Object) } class Auth { +String token +login(username: String, password: String) +logout() } class Resource { +String id +String name +fetch() } ApiClient --> Auth : uses ApiClient --> Resource : manages ```

Read the official docs.