mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-08-15 06:19:24 +02:00
Merge remote-tracking branch 'origin/develop' into knsv-treemap
This commit is contained in:
@@ -12,4 +12,4 @@
|
||||
|
||||
> `const` **configKeys**: `Set`<`string`>
|
||||
|
||||
Defined in: [packages/mermaid/src/defaultConfig.ts:285](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L285)
|
||||
Defined in: [packages/mermaid/src/defaultConfig.ts:289](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L289)
|
||||
|
@@ -98,6 +98,12 @@ Mermaid can load multiple diagrams, in the same page.
|
||||
> Try it out, save this code as HTML and load it using any browser.
|
||||
> (Except Internet Explorer, please don't use Internet Explorer.)
|
||||
|
||||
## Tiny Mermaid
|
||||
|
||||
We offer a smaller version of Mermaid that's approximately half the size of the full library. This tiny version doesn't support Mindmap Diagrams, Architecture Diagrams, KaTeX rendering, or lazy loading.
|
||||
|
||||
If you need a more lightweight version without these features, you can use [Mermaid Tiny](https://github.com/mermaid-js/mermaid/tree/develop/packages/tiny).
|
||||
|
||||
## Enabling Click Event and Tags in Nodes
|
||||
|
||||
A `securityLevel` configuration has to first be cleared. `securityLevel` sets the level of trust for the parsed diagrams and limits click functionality. This was introduced in version 8.2 as a security improvement, aimed at preventing malicious use.
|
||||
|
@@ -354,6 +354,7 @@ To Deploy Mermaid:
|
||||
|
||||
- [Mermaid Live Editor](https://github.com/mermaid-js/mermaid-live-editor)
|
||||
- [Mermaid CLI](https://github.com/mermaid-js/mermaid-cli)
|
||||
- [Mermaid Tiny](https://github.com/mermaid-js/mermaid/tree/develop/packages/tiny)
|
||||
- [Mermaid Webpack Demo](https://github.com/mermaidjs/mermaid-webpack-demo)
|
||||
- [Mermaid Parcel Demo](https://github.com/mermaidjs/mermaid-parcel-demo)
|
||||
|
||||
|
@@ -545,6 +545,38 @@ It is possible to annotate classes with markers to provide additional metadata a
|
||||
|
||||
Annotations are defined within the opening `<<` and closing `>>`. There are two ways to add an annotation to a class, and either way the output will be same:
|
||||
|
||||
> **Tip:**\
|
||||
> In Mermaid class diagrams, annotations like `<<interface>>` can be attached in two ways:
|
||||
>
|
||||
> - **Inline with the class definition** (Recommended for consistency):
|
||||
>
|
||||
> ```mermaid-example
|
||||
> classDiagram
|
||||
> class Shape <<interface>>
|
||||
> ```
|
||||
>
|
||||
> ```mermaid
|
||||
> classDiagram
|
||||
> class Shape <<interface>>
|
||||
> ```
|
||||
>
|
||||
> - **Separate line after the class definition**:
|
||||
>
|
||||
> ```mermaid-example
|
||||
> classDiagram
|
||||
> class Shape
|
||||
> <<interface>> Shape
|
||||
> ```
|
||||
>
|
||||
> ```mermaid
|
||||
> classDiagram
|
||||
> class Shape
|
||||
> <<interface>> Shape
|
||||
> ```
|
||||
>
|
||||
> Both methods are fully supported and produce identical diagrams.\
|
||||
> However, it is recommended to use the **inline style** for better readability and consistent formatting across diagrams.
|
||||
|
||||
- In a **_separate line_** after a class is defined:
|
||||
|
||||
```mermaid-example
|
||||
|
@@ -16,13 +16,25 @@ This diagram type is particularly useful for developers, network engineers, educ
|
||||
|
||||
## Syntax
|
||||
|
||||
```md
|
||||
```
|
||||
packet-beta
|
||||
start: "Block name" %% Single-bit block
|
||||
start-end: "Block name" %% Multi-bit blocks
|
||||
... More Fields ...
|
||||
```
|
||||
|
||||
### Bits Syntax (v\<MERMAID_RELEASE_VERSION>+)
|
||||
|
||||
Using start and end bit counts can be difficult, especially when modifying a design. For this we add a bit count field, which starts from the end of the previous field automagically. Use `+<count>` to set the number of bits, thus:
|
||||
|
||||
```
|
||||
packet-beta
|
||||
+1: "Block name" %% Single-bit block
|
||||
+8: "Block name" %% 8-bit block
|
||||
9-15: "Manually set start and end, it's fine to mix and match"
|
||||
... More Fields ...
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
```mermaid-example
|
||||
@@ -76,8 +88,8 @@ packet-beta
|
||||
```mermaid-example
|
||||
packet-beta
|
||||
title UDP Packet
|
||||
0-15: "Source Port"
|
||||
16-31: "Destination Port"
|
||||
+16: "Source Port"
|
||||
+16: "Destination Port"
|
||||
32-47: "Length"
|
||||
48-63: "Checksum"
|
||||
64-95: "Data (variable length)"
|
||||
@@ -86,8 +98,8 @@ title UDP Packet
|
||||
```mermaid
|
||||
packet-beta
|
||||
title UDP Packet
|
||||
0-15: "Source Port"
|
||||
16-31: "Destination Port"
|
||||
+16: "Source Port"
|
||||
+16: "Destination Port"
|
||||
32-47: "Length"
|
||||
48-63: "Checksum"
|
||||
64-95: "Data (variable length)"
|
||||
|
Reference in New Issue
Block a user