<commit_before>---
title: Usage
order: 1
---
# Usage
## Installation

Either use the npm or bower package managers as per below:

```
bower install mermaid --save-dev
```

```
npm install mermaid --save-dev
```

Or download javascript files as per the url below, note that #version# should be replaced with version of choice:

```
https://cdn.rawgit.com/knsv/mermaid/#version#/dist/mermaid.min.js
```

Ex:
* [version 0.5.1](https://cdn.rawgit.com/knsv/mermaid/0.5.1/dist/mermaid.min.js)


There are some bundles to choose from:
* mermaid.js, mermaid.min.js This bundle contains everything you need to run mermaid
* mermaid.slim.js, mermaid.slim.min.js This bundle does not contain d3 which is useful for sites that already have d3 in place
* mermaidAPI.js, mermaidAPI.min.js, This bundle does not contain the web integration provided in the other packages but has a render function instead returns svg code.


** Important: **
> It's best to use a specific tag or commit hash in the URL (not a branch). Files are cached permanently after the first request.

Read more about that at [https://rawgit.com/](https://rawgit.com/)

## Simple usage on a web page

The easiest way to integrate mermaid on a web page requires two elements:
1. Inclusion of the mermaid framework in the html page using a script tag
2. A graph definition on the web page

If these things are in place mermaid listens to the page load event and when fires, when the page has loaded, it will
locate the graphs n the page and transform them to svg files.

### Include mermaid on your web page:

```
&lt;script src=&quot;mermaid.min.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;mermaid.initialize({startOnLoad:true});&lt;/script&gt;

```

Further down on your page mermaid will look for tags with ```class="mermaid"```. From these tags mermaid will try to
read the chart definiton which will be replaced with the svg chart.


### Define a chart like this:

```
&lt;div class=&quot;mermaid&quot;&gt;
    CHART DEFINITION GOES HERE
&lt;/div&gt;

```

Would end up like this:
```
&lt;div class=&quot;mermaid&quot; id=&quot;mermaidChart0&quot;&gt;
    &lt;svg&gt;
        Chart ends up here
    &lt;/svg&gt;
&lt;/div&gt;

```
An id is also added to mermaid tags without id.

###Labels out of bounds

If you use dynamically loaded fonts that are loaded through CSS, such as Google fonts, mermaid should wait for the 
whole page to have been loaded (dom + assets, particularly the fonts file).

$(document).load(function() {
    mermaid.initialize();
});
over

$(document).ready(function() {
    mermaid.initialize();
});<commit_msg>Add missing space for 'Labels out of bounds' section<commit_after>---
title: Usage
order: 1
---
# Usage
## Installation

Either use the npm or bower package managers as per below:

```
bower install mermaid --save-dev
```

```
npm install mermaid --save-dev
```

Or download javascript files as per the url below, note that #version# should be replaced with version of choice:

```
https://cdn.rawgit.com/knsv/mermaid/#version#/dist/mermaid.min.js
```

Ex:
* [version 0.5.1](https://cdn.rawgit.com/knsv/mermaid/0.5.1/dist/mermaid.min.js)


There are some bundles to choose from:
* mermaid.js, mermaid.min.js This bundle contains everything you need to run mermaid
* mermaid.slim.js, mermaid.slim.min.js This bundle does not contain d3 which is useful for sites that already have d3 in place
* mermaidAPI.js, mermaidAPI.min.js, This bundle does not contain the web integration provided in the other packages but has a render function instead returns svg code.


** Important: **
> It's best to use a specific tag or commit hash in the URL (not a branch). Files are cached permanently after the first request.

Read more about that at [https://rawgit.com/](https://rawgit.com/)

## Simple usage on a web page

The easiest way to integrate mermaid on a web page requires two elements:
1. Inclusion of the mermaid framework in the html page using a script tag
2. A graph definition on the web page

If these things are in place mermaid listens to the page load event and when fires, when the page has loaded, it will
locate the graphs n the page and transform them to svg files.

### Include mermaid on your web page:

```
&lt;script src=&quot;mermaid.min.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;mermaid.initialize({startOnLoad:true});&lt;/script&gt;

```

Further down on your page mermaid will look for tags with ```class="mermaid"```. From these tags mermaid will try to
read the chart definiton which will be replaced with the svg chart.


### Define a chart like this:

```
&lt;div class=&quot;mermaid&quot;&gt;
    CHART DEFINITION GOES HERE
&lt;/div&gt;

```

Would end up like this:
```
&lt;div class=&quot;mermaid&quot; id=&quot;mermaidChart0&quot;&gt;
    &lt;svg&gt;
        Chart ends up here
    &lt;/svg&gt;
&lt;/div&gt;

```
An id is also added to mermaid tags without id.

### Labels out of bounds

If you use dynamically loaded fonts that are loaded through CSS, such as Google fonts, mermaid should wait for the 
whole page to have been loaded (dom + assets, particularly the fonts file).

$(document).load(function() {
    mermaid.initialize();
});
over

$(document).ready(function() {
    mermaid.initialize();
});
{'fraction_non_alphanumeric': 0.10949464012251149, 'fraction_numerical': 0.004594180704441042, 'mean_word_length': 4.173267326732673, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 5, 'https://': 8, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3267314', 'n_tokens_mistral': 1716, 'n_tokens_neox': 1631, 'n_words': 678}