An Opal library for working with Mikado graphs.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


An Opal library for creating Mikado Method graphs in an easy to use way.


Add this line to your application's Gemfile:

gem 'opal-mikado'

And then execute:

$ bundle

Or install it yourself as:

$ gem install opal-mikado


The Ruby Code

# opal/application.rb

require 'opal'
require 'browser'
require 'opal-dagred3'
require 'opal-mikado'

class App
  attr_accessor :mikado

  def initialize
        .attr('class', 'container')'svg')
    @mikado =
    @mikado.layout.node_sep = 10
    @mikado.layout.rank_dir = "BT"
    @mikado.layout.edge_sep = 2

  def graph(data)
    @mikado.build_graph(data[:nodes], data[:edges])


nodes = [
  { id: "A", label: "Some great label A", state: "done" },
  { id: "B", label: "Some great label B", state: "doing" }

edges = [{ from: "A", to: "B" }]

data = { nodes: nodes, edges: edges }

$document.ready do

How It Works

The Mikado#build_graph method expects two arrays of hashes. The first array is the nodes to be drawn. The nodes must have an id, label, and state in each hash. Whatever string you pass in the state slot in the hash will become a class on the div surrounding that node's text. This can then be used to style and color nodes from your css. The second array contains the edges, and provide the graphing library with the information needed to properly direct the graph. These edges go outward or upward from: the trunk to: the leaves, or from more elementary nodes to their dependencies.

In Need of Style and Form

Some html and styling information is also necessary to use the library. Something like the following should suffice (Bear in mind you will need to increase the size of the svg .container as you add more nodes to the graph):


<!DOCTYPE html>
    <meta charset="utf-8">
    <script src="/assets/application.js"></script>
    svg {
      border: 1px solid black;

    .container {
        width: 800 px;
        height: 600 px;

    text {
      font-weight: 300;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
      font-size: 10px;

    .node rect {
      stroke-width: 2px;
      stroke: #333;
      fill: #fff;

    .edgeLabel rect {
      fill: #fff;

    .edgePath path {
      stroke: #333;
      stroke-width: 1.5px;
      fill: none;



Or you could use Paggio and keep your entire app in ruby.

Run w/ Rack

You can follow the directions at to compile your opal scripts and serve the pages, or run it with this simple (taken from the README at opal-dagred3).


require 'opal'
require 'bundler'

run { |s|
  s.append_path 'opal'

  s.main = 'application.rb'

  s.index_path = 'index.html'


  1. Fork it ( )
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Add a TEST.
  4. Commit your changes (git commit -am 'Add some feature')
  5. Push to the branch (git push origin my-new-feature)
  6. Create new Pull Request

We love tests at LonelyPlanet, and Pull Requests can not be merged without them, no matter how cool the feature or well-coded. So please write some tests to go with your feature or bug-fix.