diff --git a/app/assets/javascripts/application.coffee b/app/assets/javascripts/application.coffee
index a5d2a13..9d2ca6c 100644
--- a/app/assets/javascripts/application.coffee
+++ b/app/assets/javascripts/application.coffee
@@ -32,10 +32,13 @@
 #= require bootstrap_theme/bootstrap/js/bootstrap.min
 #= require bootstrap_theme/plugins/iCheck/icheck.min
 #= require d3/d3.min
+#= require data_bundle
 
 $ ->
   $('input').iCheck
     checkboxClass: 'icheckbox_square-blue'
     radioClass: 'iradio_square-blue'
     increaseArea: '20%'
+
+  draw_workflow()
   return
diff --git a/app/assets/javascripts/data_bundle.coffee b/app/assets/javascripts/data_bundle.coffee
new file mode 100644
index 0000000..a53168b
--- /dev/null
+++ b/app/assets/javascripts/data_bundle.coffee
@@ -0,0 +1,64 @@
+#
+# Licensed to the Apache Software Foundation (ASF) under one
+# or more contributor license agreements.  See the NOTICE file
+# distributed with this work for additional information
+# regarding copyright ownership.  The ASF licenses this file
+# to you under the Apache License, Version 2.0 (the
+# "License"); you may not use this file except in compliance
+# with the License.  You may obtain a copy of the License at
+#
+#   http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,
+# software distributed under the License is distributed on an
+# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+# KIND, either express or implied.  See the License for the
+# specific language governing permissions and limitations
+# under the License.
+#
+
+margin =
+  top: 0
+  right: 320
+  bottom: 0
+  left: 0
+width = 960 - (margin.left) - (margin.right)
+height = 500 - (margin.top) - (margin.bottom)
+
+@draw_workflow = ->
+  tree = d3.layout.tree().separation((a, b) ->
+    if a.parent == b.parent then 1 else .5
+  ).children((d) ->
+    d.parents
+  ).size([
+      height
+      width
+    ])
+
+  svg = d3.select('#d3_visualization').append('svg').attr('width', width + margin.left + margin.right).attr('height',
+    height +
+      margin.top + margin.bottom).append('g').attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
+
+  d3.json $('#data_bundle').attr('data-url'), (error, json) ->
+    if error
+      throw error
+
+    nodes = tree.nodes(json)
+    link = svg.selectAll('.link').data(tree.links(nodes)).enter().append('path').attr('class', 'link').attr('d', elbow)
+    node = svg.selectAll('.node').data(nodes).enter().append('g').attr('class', 'node').attr('transform', (d) ->
+      'translate(' + d.y + ',' + d.x + ')')
+    node.append('text').attr('class', 'name').attr('x', 8).attr('y', -6).text (d) ->
+      d.name
+    node.append('svg:title').text((d) -> "Click for see template")
+
+    node.append('text').attr('x', 8).attr('y', 8).attr('dy', '.71em').attr('class', 'about lifespan')
+    .on "click", (d) ->
+      console.log("click on file name")
+    .html (d) ->
+      $.map(d.inputs, (val, i) ->
+        return val.file
+      ).join(', ')
+  return
+
+elbow = (d, i) ->
+  'M' + d.source.y + ',' + d.source.x + 'H' + d.target.y + 'V' + d.target.x + (if d.target.children then '' else 'h' + margin.right)
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 751d68a..10c590a 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -33,4 +33,5 @@
   *= require bootstrap_theme/dist/css/AdminLTE.min
   *= require bootstrap_theme/dist/css/skins/skin-blue.min
   *= require bootstrap_theme/plugins/iCheck/all
+  *= require data_bundle
  */
diff --git a/app/assets/stylesheets/data_bundle.scss b/app/assets/stylesheets/data_bundle.scss
new file mode 100644
index 0000000..09a3663
--- /dev/null
+++ b/app/assets/stylesheets/data_bundle.scss
@@ -0,0 +1,35 @@
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+svg {
+  .name {
+    font-weight: bold;
+  }
+
+  .about {
+    fill: #777;
+    font-size: smaller;
+  }
+
+  .link {
+    fill: none;
+    stroke: #000;
+    shape-rendering: crispEdges;
+  }
+}