Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix highlight #5903

Draft
wants to merge 3 commits into
base: master
Choose a base branch
from
Draft

Fix highlight #5903

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3f75c18
doc: fix intro image contrast in dark mode
emersonbottero Sep 27, 2024
4e4d7c4
fix: docs code highlight
emersonbottero Sep 27, 2024
1fca8a4
[autofix.ci] apply automated fixes
autofix-ci[bot] Sep 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/community/contributing.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -397,7 +397,7 @@ Documentation is located in the [`packages/mermaid/src/docs`](https://github.com

The contents of [mermaid.js.org](https://mermaid.js.org/) are based on the docs from the `master` branch. Updates committed to the `master` branch are reflected in the [Mermaid Docs](https://mermaid.js.org/) once published.

```mermaid-example
```mmd
flowchart LR
classDef default fill:#fff,color:black,stroke:black

Expand Down
2 changes: 1 addition & 1 deletion docs/config/8.6.0_docs.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ Older versions of mermaid will not parse directives because `%%` will comment ou

**for example**:

```mermaid-example
```mmd
%%{init: {"theme": "default", "logLevel": 1 }}%%
graph LR
a-->b
Expand Down
141 changes: 0 additions & 141 deletions docs/config/accessibility.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,14 +101,6 @@ See [the accTitle and accDescr usage examples](#acctitle-and-accdescr-usage-exam
B --> D[Be done]
```

```mermaid
graph LR
accTitle: Big Decisions
accDescr: Bob's Burgers process for making big decisions
A[Identify Big Decision] --> B{Make Big Decision}
B --> D[Be done]
```

Here is the HTML generated for the SVG element: _(Note that some of the SVG attributes and the SVG contents are omitted for clarity.):_

```html
Expand Down Expand Up @@ -141,18 +133,6 @@ Here is the HTML generated for the SVG element: _(Note that some of the SVG attr
B --> D[Be done]
```

```mermaid
graph LR
accTitle: Bob's Burger's Making Big Decisions
accDescr {
The official Bob's Burgers corporate processes that are used
for making very, very big decisions.
This is actually a very simple flow: identify the big decision and then make the big decision.
}
A[Identify Big Decision] --> B{Make Big Decision}
B --> D[Be done]
```

Here is the HTML generated for the SVG element: _(Note that some of the SVG attributes and the SVG contents are omitted for clarity.):_

```html
Expand Down Expand Up @@ -185,14 +165,6 @@ Here is the HTML generated for the SVG element: _(Note that some of the SVG attr
Vehicle <|-- Car
```

```mermaid
classDiagram
accTitle: My Class Diagram
accDescr: My Class Diagram Description

Vehicle <|-- Car
```

##### Entity Relationship Diagram

```mermaid-example
Expand All @@ -206,17 +178,6 @@ Here is the HTML generated for the SVG element: _(Note that some of the SVG attr

```

```mermaid
erDiagram
accTitle: My Entity Relationship Diagram
accDescr: My Entity Relationship Diagram Description

CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

```

##### Gantt Chart

```mermaid-example
Expand All @@ -235,22 +196,6 @@ Here is the HTML generated for the SVG element: _(Note that some of the SVG attr

```

```mermaid
gantt
accTitle: My Gantt Chart Accessibility Title
accDescr: My Gantt Chart Accessibility Description

title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1 , 20d
section Another
Task in sec :2014-01-12 , 12d
another task : 24d

```

##### Gitgraph

```mermaid-example
Expand All @@ -271,24 +216,6 @@ Here is the HTML generated for the SVG element: _(Note that some of the SVG attr

```

```mermaid
gitGraph
accTitle: My Gitgraph Accessibility Title
accDescr: My Gitgraph Accessibility Description

commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
commit

```

##### Pie Chart

```mermaid-example
Expand All @@ -304,19 +231,6 @@ Here is the HTML generated for the SVG element: _(Note that some of the SVG attr

```

```mermaid
pie
accTitle: My Pie Chart Accessibility Title
accDescr: My Pie Chart Accessibility Description

title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5

```

##### Requirement Diagram

```mermaid-example
Expand All @@ -339,26 +253,6 @@ Here is the HTML generated for the SVG element: _(Note that some of the SVG attr

```

```mermaid
requirementDiagram
accTitle: My Requirement Diagram
accDescr: My Requirement Diagram Description

requirement test_req {
id: 1
text: the test text.
risk: high
verifymethod: test
}

element test_entity {
type: simulation
}

test_entity - satisfies -> test_req

```

##### Sequence Diagram

```mermaid-example
Expand All @@ -371,16 +265,6 @@ Here is the HTML generated for the SVG element: _(Note that some of the SVG attr
Alice-)John: See you later!
```

```mermaid
sequenceDiagram
accTitle: My Sequence Diagram
accDescr: My Sequence Diagram Description

Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!
```

##### State Diagram

```mermaid-example
Expand All @@ -392,15 +276,6 @@ Here is the HTML generated for the SVG element: _(Note that some of the SVG attr

```

```mermaid
stateDiagram
accTitle: My State Diagram
accDescr: My State Diagram Description

s1 --> s2

```

##### User Journey Diagram

```mermaid-example
Expand All @@ -418,19 +293,3 @@ Here is the HTML generated for the SVG element: _(Note that some of the SVG attr
Sit down: 5: Me

```

```mermaid
journey
accTitle: My User Journey Diagram
accDescr: My User Journey Diagram Description

title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me

```
15 changes: 1 addition & 14 deletions docs/config/configuration.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,24 +32,11 @@ flowchart

```

```mermaid
---
title: Hello Title
config:
theme: base
themeVariables:
primaryColor: "#00ff00"
---
flowchart
Hello --> World

```

## Theme configuration

## Starting mermaid

```mermaid-example
```mmd
sequenceDiagram
Site->>mermaid: initialize
Site->>mermaid: content loaded
Expand Down
72 changes: 1 addition & 71 deletions docs/config/directives.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,17 +88,11 @@ graph LR
A-->B
```

```mermaid
%%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%%
graph LR
A-->B
```

Here the directive declaration will set the `logLevel` to `debug` and the `theme` to `dark` for a rendered mermaid diagram, changing the appearance of the diagram itself.

Note: You can use 'init' or 'initialize' as both are acceptable as init directives. Also note that `%%init%%` and `%%initialize%%` directives will be grouped together after they are parsed.

```mermaid-example
```mmd
%%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%%
%%{initialize: { 'logLevel': 'fatal', "theme":'dark', 'startOnLoad': true } }%%
...
Expand Down Expand Up @@ -149,18 +143,6 @@ A --> C[End]

```

```mermaid
%%{init: { "theme": "forest" } }%%
graph TD
A(Forest) --> B[/Another/]
A --> C[End]
subgraph section
B
C
end

```

### Changing fontFamily via directive

The following code snippet changes fontFamily to Trebuchet MS, Verdana, Arial, Sans-Serif:
Expand All @@ -181,18 +163,6 @@ A --> C[End]

```

```mermaid
%%{init: { "fontFamily": "Trebuchet MS, Verdana, Arial, Sans-Serif" } }%%
graph TD
A(Forest) --> B[/Another/]
A --> C[End]
subgraph section
B
C
end

```

### Changing logLevel via directive

The following code snippet changes `logLevel` to `2`:
Expand Down Expand Up @@ -222,17 +192,6 @@ A --> C[End]
end
```

```mermaid
%%{init: { "logLevel": 2 } }%%
graph TD
A(Forest) --> B[/Another/]
A --> C[End]
subgraph section
B
C
end
```

### Changing flowchart config via directive

Some common flowchart configurations are:
Expand Down Expand Up @@ -262,17 +221,6 @@ A --> C[End]
end
```

```mermaid
%%{init: { "flowchart": { "htmlLabels": true, "curve": "linear" } } }%%
graph TD
A(Forest) --> B[/Another/]
A --> C[End]
subgraph section
B
C
end
```

### Changing Sequence diagram config via directive

Some common sequence diagram configurations are:
Expand Down Expand Up @@ -302,15 +250,6 @@ Alice->Bob: Good.
Bob->Alice: Cool
```

```mermaid
sequenceDiagram

Alice->Bob: Hello Bob, how are you?
Bob->Alice: Fine, how did your mother like the book I suggested? And did you catch the new book about alien invasion?
Alice->Bob: Good.
Bob->Alice: Cool
```

Now let us enable wrap for sequence diagrams.

The following code snippet changes sequence diagram config for `wrap` to `true`:
Expand All @@ -327,12 +266,3 @@ Bob->Alice: Fine, how did your mother like the book I suggested? And did you cat
Alice->Bob: Good.
Bob->Alice: Cool
```

```mermaid
%%{init: { "sequence": { "wrap": true, "width":300 } } }%%
sequenceDiagram
Alice->Bob: Hello Bob, how are you?
Bob->Alice: Fine, how did your mother like the book I suggested? And did you catch the new book about alien invasion?
Alice->Bob: Good.
Bob->Alice: Cool
```
4 changes: 2 additions & 2 deletions docs/config/math.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ Note that at the moment, the only supported diagrams are below:

### Flowcharts

```mermaid-example
```mmd
graph LR
A["$$x^2$$"] -->|"$$\sqrt{x+3}$$"| B("$$\frac{1}{2}$$")
A -->|"$$\overbrace{a+b+c}^{\text{note}}$$"| C("$$\pi r^2$$")
Expand All @@ -34,7 +34,7 @@ Note that at the moment, the only supported diagrams are below:

### Sequence

```mermaid-example
```mmd
sequenceDiagram
autonumber
participant 1 as $$\alpha$$
Expand Down
Loading
Loading