mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-09-26 18:59:42 +02:00
Update links to mermaid.live
(#3163)
* chore: update browsers list * Re enable markdown & jsdoc linting. * Update links to `mermaid.live` Co-authored-by: sidharthv96 <sidharthv96@users.noreply.github.com>
This commit is contained in:
@@ -5,7 +5,7 @@ Configuration is the second half of Mermaid, after deployment. Together Deployme
|
||||
This section will introduce the different methods of configuring of the behaviors and appearances of Mermaid Diagrams.
|
||||
The Following are the most commonly used methods, and are all tied to Mermaid [Deployment](./n00b-gettingStarted.md) methods.
|
||||
|
||||
## Configuration Section in the [Live Editor](https://mermaid-js.github.io/mermaid-live-editor).
|
||||
## Configuration Section in the [Live Editor](https://mermaid.live/).
|
||||
|
||||
|
||||
## The `initialize()` call, for when Mermaid is called via an API, or through a <script> tag.
|
||||
|
@@ -26,7 +26,7 @@ Diagramming and documentation costs precious developer time and gets outdated qu
|
||||
But not having diagrams or docs ruins productivity and hurts organizational learning.<br/>
|
||||
Mermaid addresses this problem by enabling users to create easily modifiable diagrams, it can also be made part of production scripts (and other pieces of code).<br/>
|
||||
<br/>
|
||||
Mermaid allows even non-programmers to easily create detailed and diagrams through the [Mermaid Live Editor](https://mermaid-js.github.io/mermaid-live-editor/).<br/>
|
||||
Mermaid allows even non-programmers to easily create detailed and diagrams through the [Mermaid Live Editor](https://mermaid.live/).<br/>
|
||||
[Tutorials](./docs/Tutorials.md) has video tutorials.
|
||||
Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./docs/integrations.md).
|
||||
|
||||
|
@@ -98,7 +98,6 @@ it('should render forks and joins', () => {
|
||||
);
|
||||
cy.get('svg');
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
### Any Questions or Suggestions?
|
||||
|
@@ -53,9 +53,9 @@ Editing is as easy as pasting your **Diagram code**, into the `code` section of
|
||||
|
||||
The Gist you create should have a code.mmd file and optionally a config.json. [Example](https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a)
|
||||
|
||||
To load a gist into the Editor, you can use https://mermaid-js.github.io/mermaid-live-editor/edit?gist=https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a
|
||||
To load a gist into the Editor, you can use https://mermaid.live/edit?gist=https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a
|
||||
|
||||
and to View, https://mermaid-js.github.io/mermaid-live-editor/view?gist=https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a
|
||||
and to View, https://mermaid.live/view?gist=https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a
|
||||
|
||||
## 2. Using Mermaid Plugins:
|
||||
|
||||
|
@@ -64,6 +64,6 @@ Being based on markdown, Mermaid can be used, not only by accomplished front-end
|
||||
In fact one can pick up the syntax for it quite easily from the examples given and there are many tutorials available in the internet.
|
||||
|
||||
## Mermaid is for everyone.
|
||||
Video [Tutorials](https://mermaid-js.github.io/mermaid/#/./Tutorials) are also available for the mermaid [live editor](https://mermaid-js.github.io/mermaid-live-editor/).
|
||||
Video [Tutorials](https://mermaid-js.github.io/mermaid/#/./Tutorials) are also available for the mermaid [live editor](https://mermaid.live/).
|
||||
|
||||
Alternatively you can use Mermaid [Plug-Ins](https://mermaid-js.github.io/mermaid/#/./integrations), with tools you already use, like Google Docs.
|
||||
|
@@ -243,24 +243,26 @@ This function will in turn call a function *your diagram should provide* returni
|
||||
|
||||
```js
|
||||
const getStyles = (options) =>
|
||||
`
|
||||
.line {
|
||||
stroke-width: 1;
|
||||
stroke: ${options.lineColor};
|
||||
stroke-dasharray: 2;
|
||||
}
|
||||
// ...
|
||||
`
|
||||
.line {
|
||||
stroke-width: 1;
|
||||
stroke: ${options.lineColor};
|
||||
stroke-dasharray: 2;
|
||||
}
|
||||
// ...
|
||||
`;
|
||||
```
|
||||
|
||||
Note that you need to provide your function to the main getStyles by adding it into the themes object in **src/styles.js** like in the xyzDiagram in the provided example:
|
||||
|
||||
```js
|
||||
const themes = {
|
||||
flowchart,
|
||||
'flowchart-v2': flowchart,
|
||||
sequence,
|
||||
xyzDiagram
|
||||
//...
|
||||
flowchart,
|
||||
'flowchart-v2': flowchart,
|
||||
sequence,
|
||||
xyzDiagram,
|
||||
//...
|
||||
};
|
||||
```
|
||||
|
||||
The actual options and values for the colors are defined in **src/theme/theme-[xyz].js**. If you provide the options your diagram needs in the existing theme files then the theming will work smoothly without hiccups.
|
||||
|
@@ -14,7 +14,7 @@ Please note that you can switch versions through the dropdown box at the top rig
|
||||
|
||||
## Using mermaid
|
||||
|
||||
For the majority of users, Using the [Live Editor](https://mermaid-js.github.io/mermaid-live-editor/) would be sufficient, however you may also opt to deploy mermaid as a dependency or using the [Mermaid API](./Setup.md).
|
||||
For the majority of users, Using the [Live Editor](https://mermaid.live/) would be sufficient, however you may also opt to deploy mermaid as a dependency or using the [Mermaid API](./Setup.md).
|
||||
|
||||
We have compiled some Video [Tutorials](./Tutorials.md) on how to use the mermaid Live Editor.
|
||||
|
||||
@@ -314,7 +314,7 @@ var textFieldUpdated = function(){
|
||||
bindEventHandler('change', 'code', textFieldUpdated);
|
||||
```
|
||||
**Alternative to mermaid.parse():**
|
||||
One effective and more future-proof method of validating your graph definitions, is to paste and render them via the [Mermaid Live Editor](https://mermaid-js.github.io/mermaid-live-editor/). This will ensure that your code is compliant with the syntax of Mermaid's most recent version.
|
||||
One effective and more future-proof method of validating your graph definitions, is to paste and render them via the [Mermaid Live Editor](https://mermaid.live/). This will ensure that your code is compliant with the syntax of Mermaid's most recent version.
|
||||
|
||||
|
||||
## Configuration
|
||||
|
Reference in New Issue
Block a user