Before creating such a post in Octopress, I need to add something into Octopress to make it support such posts.
1 2 3
The latest offical “KityMinder” files did not work properly. Please download the two files from the URLs above.
The two files do the magic to render the “markdown” format content in an Octopress post into a visual mind map.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
Note that this code snippet has the following two enhancements comparing to the original source:
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.
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.
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
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.