Introduction

Cytoscape.js is an open source graph theory visaulization library written in Javascript. This article guide you through the procedures of integrating the library with hexo. There are many ways to do so, this is only one of the methods. People tend to put the javascript files inside after_footer.ejs, however, the article content is loaded before javascript files. If you want to write the script of drawing graphs JUST INSIDE the markdown file, you have to wait until the javascript files of is loaded.

Installation:

The following guideline is written based on the themes called pacman.

1. Download the js file and the js.map file from the offical website
2. Put the js file and the js.map file inside the themes/pacman/source/js folder
3. Download the waitUntil function from here, create a file called waitUntil.js put it inside themes/pacman/source/js folder
4. Put the code inside themes/pacman/layout/_partial/head.ejs, which load waitUntil function before the article content

{% codeblock %} <% if (page.cytoscape) { %> <%- js('js/waitUntil.js') %> <% } %> {% endcodeblock %} 5. Put the code inside themes/pacman/layout/_partial/after_footer.ejs {% codeblock %} <% if (page.cytoscape) { %> <%- js('js/cytoscape.js') %> <% } %> {% endcodeblock %} 6. Add an attribute to the post: cytoscape: true {% asset_img 'attribute.png' %} 7. Put the following codes inside the markdown file. It draws the graph inside the container called cy after the cytoscape and jquery are loaded. Remember that you have to set the style of the container, otherwise the graph will be invisible. {% codeblock %}

{% endcodeblock %}

Result: