Gangmax Blog

Add Mind Map in Octopress Post

This post describes how to add “mind map” support in Octopress. The “mind map” content is in “markdown” format as part of an Octopress post, and rendered by the “KityMinder“ JavaScript library.

Preparation

Before creating such a post in Octopress, I need to add something into Octopress to make it support such posts.

1. Add “KityMinder” JavaScript files

1
2
3
cd octopress/source/javascripts
wget http://oliveryang.net/media/js/kityminder.core.min.js
wget http://oliveryang.net/media/js/kity.min.js

Note that:

  1. The latest offical “KityMinder” files did not work properly. Please download the two files from the URLs above.

  2. The two files do the magic to render the “markdown” format content in an Octopress post into a visual mind map.

2. Update Octopress to enable the JavaScript files

Update the “source/_includes/custom/footer.html” file by adding the two JavaScript files.

source/_includes/custom/footer.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!--
The following code is used to render the mind map content if there is. The "<pre>"
tag which contents the mind map must has "class" attribute with a name starting
with "km-container", then the "<pre>" tag can be renderer properly. Multiple "<pre>"
are supported only if they have different name like "km-container1", "km-container2".
-->
<script type="text/javascript" src="{{ root_url }}/javascripts/kity.min.js"></script>
<script type="text/javascript" src="{{ root_url }}/javascripts/kityminder.core.min.js"></script>
<script type="text/javascript">
[].forEach.call(document.querySelectorAll("[class^='km-container']"), function(dom) {
    var km = window.km = new kityminder.Minder();
    km.setup(dom);
});
</script>

<!-- The original content of this file: -->

Note that this code snippet has the following two enhancements comparing to the original source:

  1. Use “wildcard element match”(from here and here) to select all the “mind map” parts in the current HTML document to avoid literal one-by-one handling. You only need to name the “mind map” parts starting with “km-container” then they are good to go.

  2. Put the “var km = window.km = new kityminder.Minder();“ line inside the loop to fix the issue that only the last “mind map” part is rendered.

Creating Post

Create a post in Octopress as usual. Add the following “mind map” content.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<pre class="km-container" minder-data-type="markdown" style="width: 1000px; height: 500px">
- Scrum ceremonies
  - 1. Sprint starting: requirement discussion and the poker game
    - Confirm all the requirement details
    - The product manager prioritize all the requirement items
    - Play the poker game to give score to each task
  - 2. Daily scrum meeting
    - Each scrum member selects task
    - Answer the following 3 questions:
      - What did I do yesterday?
      - What will I do today?
      - Any problems I have?
  - 3. Sprint ending: retrospection
    - What do you think we did not do well in the last sprint?
    - What do you think we did well in the last sprint?
    - How can we improve?
</pre>

<pre class="km-container" minder-data-type="markdown" style="width: 150%; height: 400px">
- 把大象放进冰箱需要几个步骤?
  - 1. 打开冰箱门
  - 2. 放入大象
  - 3. 关上冰箱门
</pre>

It looks like below:

Mind Map 1

- Scrum ceremonies
  - 1. Sprint starting: requirement discussion and the poker game
    - Confirm all the requirement details
    - The product manager prioritize all the requirement items
    - Play the poker game to give score to each task
  - 2. Daily scrum meeting
    - Each scrum member selects task
    - Answer the following 3 questions:
      - What did I do yesterday?
      - What will I do today?
      - Any problems I have?
  - 3. Sprint ending: retrospection
    - What do you think we did not do well in the last sprint?
    - What do you think we did well in the last sprint?
    - How can we improve?

Mind Map 2

- 把大象放进冰箱需要几个步骤?
  - 1. 打开冰箱门
  - 2. 放入大象
  - 3. 关上冰箱门

After finishing editing the post, generate the static HTML content as usual. You should see the mind map content as expection.

The original idea came from Oliver Yang’s blog site.

Comments