Use javascript library with Documenter.jl

General Usage
,
1

Does anyone know if it is possible to include an external javascript library with Documenter.jl?

For example, I am trying to draw a flowchart, which should be possible with Markdown and flowchart.js, for example see example here.

Anyone having success including those libraries in their code documentation?

2

You can use the asset function to pass additional JS libraries. You probably want to link to the cdnjs-hosted version, as the other JS dependencies already use cdnjs. Something like this should work:

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

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)

```@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):

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, but I do not know how to apply their suggestions in the context of Documenter.jl.

4

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

3 Likes
5

Thanks @mortenpi, appreciate it.

6

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:

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

Then I could call Documenter.HTML like so:

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

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. I did

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

but it does not work.

1 Like
8

For reference, the following works:

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

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:

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

Check this out if you want to see an example: 1st-gen Repeater · QuantumSavory.jl