# Use javascript library with Documenter.jl

**URL:** <https://discourse.julialang.org/t/use-javascript-library-with-documenter-jl/34984>\
**Category:** General Usage\
**Tags:** documentation, documenter\
**Created:** [February 21, 2020, 5:23pm UTC](https://discourse.julialang.org/t/use-javascript-library-with-documenter-jl/34984 "2020-02-21T17:23:03Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![mopg](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/mopg/32/3368_2.png) [@mopg](https://discourse.julialang.org/u/mopg)\
**Post date:** [February 21, 2020, 5:23pm UTC](https://discourse.julialang.org/t/use-javascript-library-with-documenter-jl/34984/1 "2020-02-21T17:23:03Z")

</div>

Does anyone know if it is possible to include an external javascript library with [Documenter.jl](https://github.com/JuliaDocs/Documenter.jl)?

For example, I am trying to draw a flowchart, which should be possible with Markdown and [flowchart.js](http://flowchart.js.org), for example see example [here](https://support.typora.io/Draw-Diagrams-With-Markdown/).

Anyone having success including those libraries in their code documentation?

---

<div class="post-metadata">

**Author:** ![mortenpi](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/mortenpi/32/158_2.png) [@mortenpi](https://discourse.julialang.org/u/mortenpi)\
**Post date:** [February 21, 2020, 10:14pm UTC](https://discourse.julialang.org/t/use-javascript-library-with-documenter-jl/34984/2 "2020-02-21T22:14:09Z")

</div>

You can use the [`asset` function](https://juliadocs.github.io/Documenter.jl/stable/lib/public/#Documenter.Writers.HTMLWriter.asset) to pass additional JS libraries. You probably want to link to the [cdnjs-hosted version](https://cdnjs.com/libraries/flowchart), as the other JS dependencies already use cdnjs. Something like this should work:

```julia
makedocs(
  format = Documenter.HTML(
    assets = [
      asset("https://cdnjs.cloudflare.com/ajax/libs/flowchart/1.13.0/flowchart.min.js"),
      ...
    ],
    ...
  ),
  ...
)

```

---

<div class="post-metadata">

**Author:** ![mopg](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/mopg/32/3368_2.png) [@mopg](https://discourse.julialang.org/u/mopg)\
**Post date:** [February 25, 2020, 5:35am UTC](https://discourse.julialang.org/t/use-javascript-library-with-documenter-jl/34984/3 "2020-02-25T05:35:43Z")

</div>

Thanks for your reply. Great to see that there is support for this.

Unfortunately, I can’t seem to get any library to work. The issue seems to be related to Documenter.jl relying on require.js, which does not play nice with some of the libraries? Any idea how to get around this?

I followed your instructions and then added (from the example)

````julia
```@flow
st=>start: Start
op=>operation: Your Operation
cond=>condition: Yes or No?
e=>end

st->op->cond
cond(yes)->e
cond(no)->op
​```

````

to a file in my documentation. When I load up my documentation page, it’s just printed raw. When I check the developer console, I get the following error message (note only printing a small bit, the error message is very long):

```julia
Error: Mismatched anonymous define() module: function (t){return function(t){function i(s){if(e[s])return e[s].exports;var o=e[s]={exports:{},id:s,loaded:!1};return t[s].call(o.exports,o,o.exports,i),o.loaded=!0,o.exports}var e={};return i.m=t,i.c=e,i.p="",i(0)}([function(t,i,e){e(9);var s=e(4);e(15);var o={parse:s};"undefined"!=typeof window&&(window.flowchart=o),t.exports=o},function(t,i){function e(t,i){if(!t||"function"==typeof t)return i;var s={};for(var o in i)s[o]=i[o];for(o in t)t[o]&&("object"==typeof s[o]?s[o]=e(s[o],t[o]):s[o]=t[o]);return s}function s(t,i){if("function"==typeof Object.create)t.super_=i,t.prototype=Object.create(i.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}});else{t.super_=i;var e=function(){};e.prototype=i.prototype,t.prototype=new e,t.prototype.constructor=t}}t.exports={defaults:e,inherits:s}},function(t,i,e){function s(t,i,e){this.chart=t,this.group=this.chart.paper.set(),this.symbol=e,this.connectedTo=[],this.symbolType=i.symbolType,this.flowstate=i.flowstate||"future",this.lineStyle=i.lineStyle||{},this.key=i.key||"",this.leftLines=[],this.rightLines=[],this.topLines=[],this.bottomLines=[],this.next_direction=i.next&&i.direction_next?i.direction_next:void 0,this.text=this.chart.paper.text(0,0,i.text),i.key&&(this.text.node.id=i.key+"t"),this.text.node.setAttribute("class",this.getAttr("class")+"t"),this.text.attr({"text-anchor":"start",x:this.getAttr("text-margin"),fill:this.getAttr("font-color"),"font-size":this.getAttr("font-size")});var s=this.getAttr("font"),o=this.getAttr("font-family"),h=this.getAttr("font-weight");s&&this.text.attr({font:s}),o&&this.text.attr({"font-family":o}),h&&this.text.attr({"font-weight":h}),i.link&&this.text.attr("href",i.link),i.function&&

```

That error is also listed in the [require.js FAQ](https://requirejs.org/docs/errors.html#mismatch), but I do not know how to apply their suggestions in the context of Documenter.jl.

---

<div class="post-metadata">

**Author:** ![mortenpi](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/mortenpi/32/158_2.png) [@mortenpi](https://discourse.julialang.org/u/mortenpi)\
**Post date:** [February 27, 2020, 12:04am UTC](https://discourse.julialang.org/t/use-javascript-library-with-documenter-jl/34984/4 "2020-02-27T00:04:44Z")

</div>

Unfortunately, there is no way to pass user-defined things to the RequireJS file right now, and no easy workaround either. But we do want this, so I’ve opened an issue: [User-defined RequireJS deps · Issue #1247 · JuliaDocs/Documenter.jl · GitHub](https://github.com/JuliaDocs/Documenter.jl/issues/1247)

---

<div class="post-metadata">

**Author:** ![mopg](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/mopg/32/3368_2.png) [@mopg](https://discourse.julialang.org/u/mopg)\
**Post date:** [February 27, 2020, 5:38am UTC](https://discourse.julialang.org/t/use-javascript-library-with-documenter-jl/34984/5 "2020-02-27T05:38:42Z")

</div>

Thanks @mortenpi, appreciate it.

---

<div class="post-metadata">

**Author:** ![rkat](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/rkat/32/3918_2.png) [@rkat](https://discourse.julialang.org/u/rkat)\
**Post date:** [April 14, 2020, 4:37am UTC](https://discourse.julialang.org/t/use-javascript-library-with-documenter-jl/34984/6 "2020-04-14T04:37:30Z")

</div>

Late to the party but I encountered this problem and solved it by deleting the anonymous defines in the library that I wanted to use (in my case, mermaid). I put the resulting library in `assets/mermaid.js`, and put this in `assets/init.js`:

```nohighlight
require(['mermaid'], function(mermaid) { mermaid.init() });

```

Then I could call `Documenter.HTML` like so:

```julia
format = Documenter.HTML(;
   assets=["assets/mermaid.js", "assets/init.js"]
)

```

---

<div class="post-metadata">

**Author:** ![albinahlback](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/albinahlback/32/22873_2.png) [@albinahlback](https://discourse.julialang.org/u/albinahlback)\
**Post date:** [March 13, 2021, 1:16am UTC](https://discourse.julialang.org/t/use-javascript-library-with-documenter-jl/34984/7 "2021-03-13T01:16:48Z")

</div>

Hello @rkat! I am trying to get mermaid to work for some documentation. Do you have an working example or can you share some more details on how you made it work?

I followed what you said, and downloaded mermaid from [https://unpkg.com/mermaid@8.9.1/dist/mermaid.min.js](https://unpkg.com/mermaid@8.9.1/dist/mermaid.min.js). I did

````julia
```@mermaid
graph TD
  Set --> Group
```

````

but it does not work.

---

<div class="post-metadata">

**Author:** ![Krastanov](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/krastanov/32/6817_2.png) [@Krastanov](https://discourse.julialang.org/u/Krastanov)\
**Post date:** [June 15, 2022, 4:09pm UTC](https://discourse.julialang.org/t/use-javascript-library-with-documenter-jl/34984/8 "2022-06-15T16:09:08Z")

</div>

For reference, the following works:

Create an `assets/init.jl` file that downloads mermaid (or another library) from a cdn and then initialize it:

```javascript
require.config({
    paths: {
        mermaid: "https://cdnjs.cloudflare.com/ajax/libs/mermaid/9.1.2/mermaid"
    }
});
require(['mermaid'], function(mermaid) { mermaid.init() });

```

Then just add the file to your assets:

```julia
    format = Documenter.HTML(
        assets=["assets/init.js"]
    ),

```

Check this out if you want to see an example: [1st-gen Repeater · QuantumSavory.jl](https://krastanov.github.io/QuantumSavory.jl/dev/howto-firstgenrepeater/#Entangler)