Add Mind Map format

harehare · Sep 23, 2019 · a5a7614 · a5a7614
1 parent 205b0f1
commit a5a7614
Show file tree

Hide file tree

Showing 40 changed files with 691 additions and 90 deletions.
diff --git a/README.md b/README.md
@@ -17,6 +17,7 @@ TextUSM is a simple tool. Help you draw user story map using indented text.
   - 4Ls Retrospective
   - Start, Stop, Continue Retrospective
   - KPT Retrospective
+  - Mind Map
 - Export a Diagram
   - SVG
   - PNG
@@ -134,6 +135,22 @@ Try
 
 ![image](./img/kpt.png)
 
+### MindMap
+
+```
+TextUSM
+    WORK QUICKLY
+        Draw diagrams without leaving the keyboard.
+    SAVE TIME
+        Instantly visualize your ideas.
+    EXPORT TO IMAGES
+        Images can be exported as png or svg.
+    SHARING
+        Share your diagrams online with your colleagues.
+```
+
+![image](./img/mmp.png)
+
 ## Installation
 
 - [Web](https://textusm.com)

diff --git a/cli/README.md b/cli/README.md
@@ -157,6 +157,22 @@ Try
 
 ![image](./img/kpt.png)
 
+### MindMap
+
+```
+TextUSM
+    WORK QUICKLY
+        Draw diagrams without leaving the keyboard.
+    SAVE TIME
+        Instantly visualize your ideas.
+    EXPORT TO IMAGES
+        Images can be exported as png or svg.
+    SHARING
+        Share your diagrams online with your colleagues.
+```
+
+![image](./img/mmp.png)
+
 ## Example JSON configuration file
 
 ```json

diff --git a/cli/index.ts b/cli/index.ts
@@ -10,6 +10,7 @@ const defaultSettings = {
   position: 0,
   text: '',
   title: 'TestUSM',
+  miniMap: false,
   storyMap: {
     font: 'Open Sans',
     size: {
@@ -43,22 +44,24 @@ const defaultSettings = {
 
 const readConfigFile = (file: string) => {
   try {
-    return JSON.parse(fs.readFileSync(file).toString());
+    const settings = JSON.parse(fs.readFileSync(file).toString());
+    settings.miniMap = false;
+    return settings;
   } catch {
     return defaultSettings;
   }
 };
 
 const { configFile, input, width, height, output, diagramType } = commander
-  .version('0.0.8')
+  .version('0.1.0')
   .option('-c, --configFile [configFile]', 'Config file.')
   .option('-i, --input <input>', 'Input text file. Required.')
   .option('-w, --width <width>', 'Width of the page. Optional. Default: 1024.')
   .option('-H, --height <height>', 'Height of the page. Optional. Default: 1024.')
   .option('-o, --output [output]', 'Output file. It should be svg, png, pdf or html.')
   .option(
     '-d, --diagramType [diagramType]',
-    'Diagram type. It should be userstorymap, opportunitycanvas, businessmodelcanvas, 4ls, start_stop_continue, kpt or userpersona.'
+    'Diagram type. It should be userstorymap, opportunitycanvas, businessmodelcanvas, 4ls, start_stop_continue, kpt, userpersona or mind_map.'
   )
   .parse(process.argv);
 
@@ -80,6 +83,7 @@ const validDiagramType = [
   'start_stop_continue',
   'kpt',
   'userpersona',
+  'mind_map',
   ''
 ];
 
@@ -131,6 +135,8 @@ if (output && !/\.(?:svg|png|pdf|html)$/.test(output)) {
         ? 'kpt'
         : diagramType === 'userpersona'
         ? 'persona'
+        : diagramType === 'mind_map'
+        ? 'mmp'
         : 'usm';
     await page.goto(`https://app.textusm.com/view/${type}/${encodeURIComponent(JSON.stringify(configJson))}`);
 

diff --git a/cli/package.json b/cli/package.json
@@ -1,7 +1,7 @@
 {
   "name": "textusm.cli",
   "description": "Generate a User Story Mapping from indented text.",
-  "version": "0.0.10",
+  "version": "0.1.0",
   "author": "Takahiro Sato",
   "bin": {
     "textusm": "dist/index.js"

diff --git a/cli/test.svg b/cli/test.svg
diff --git a/extension/lib/README.md b/extension/lib/README.md
@@ -11,6 +11,7 @@ Generate a Diagram from indented text.
 - Start, Stop, Continue Retrospective
 - KPT Retrospective
 - User Persona
+- Mind Map
 
 ## Installation
 
@@ -276,6 +277,22 @@ textusm.render(
 
 ![image](./img/kpt.png)
 
+### MindMap
+
+```
+TextUSM
+    WORK QUICKLY
+        Draw diagrams without leaving the keyboard.
+    SAVE TIME
+        Instantly visualize your ideas.
+    EXPORT TO IMAGES
+        Images can be exported as png or svg.
+    SHARING
+        Share your diagrams online with your colleagues.
+```
+
+![image](./img/mmp.png)
+
 ### Configuration
 
 ```javascript

diff --git a/extension/lib/index.html b/extension/lib/index.html
@@ -12,17 +12,18 @@
   <div id="textusm8"></div>
   <div id="textusm9"></div>
   <div id="textusm10"></div>
+  <div id="textusm11"></div>
   <script>
     this.textusm.render(
       'textusm',
       `# labels: USER ACTIVITIES, USER TASKS, USER STORIES, RELEASE1, RELEASE2, RELEASE3
-# release1: 2019-06-01
-# release2: 2019-06-30
-# release2: 2019-07-31
-TextUSM
-    Online tool for making user story mapping
-        Pre0s Tab to indent lines
-        Press Shift + Tab to unindent lines: Online tool for Generate a User Story Mapping from indented text.`,
+    # release1: 2019-06-01
+    # release2: 2019-06-30
+    # release2: 2019-07-31
+    TextUSM
+        Online tool for making user story mapping
+            Pre0s Tab to indent lines
+            Press Shift + Tab to unindent lines: Online tool for Generate a User Story Mapping from indented text.`,
       { scale: 1.0, showMiniMap: true }
     );
     this.textusm.render(document.getElementById('textusm2'), {
@@ -132,16 +133,16 @@
     this.textusm.render(
       document.getElementById('textusm5'),
       `
-            test
-                estst`,
+                test
+                    estst`,
       { diagramType: 'BusinessModelCanvas' }
     );
 
     this.textusm.render(
       document.getElementById('textusm6'),
       `
-            test
-                estst`,
+                test
+                    estst`,
       { diagramType: 'OpportunityCanvas', size: { width: 2048, height: 1024 } }
     );
 
@@ -192,5 +193,20 @@
       },
       { diagramType: 'UserPersona', size: { width: 2048, height: 1024 } }
     );
+
+    this.textusm.render(
+      document.getElementById('textusm11'),
+      {
+        node: {
+          text: 'test',
+          children: [
+            { text: 'test2', children: [{ text: 'text3', children: [] }] },
+            { text: 'test22', children: [{ text: 'text33', children: [] }] },
+            { text: 'test4', children: [{ text: 'text4443', children: [] }] }
+          ]
+        }
+      },
+      { diagramType: 'MindMap', size: { width: 2048, height: 1024 } }
+    );
   </script>
 </html>
diff --git a/extension/lib/package.json b/extension/lib/package.json
@@ -1,6 +1,6 @@
 {
   "name": "textusm",
-  "version": "0.0.11",
+  "version": "0.1.0",
   "description": "Generate a User Story Map from indented text.",
   "main": "dist/index.js",
   "scripts": {
@@ -22,6 +22,7 @@
     "png",
     "pdf",
     "user-story-mapping",
+    "mindmap",
     "business-model-canvas"
   ],
   "author": "harehare",

diff --git a/extension/lib/src/index.ts b/extension/lib/src/index.ts
@@ -7,7 +7,8 @@ import {
   StartStopContinue,
   Kpt,
   toString,
-  toTypeString
+  toTypeString,
+  MindMap
 } from './model';
 
 interface Config {
@@ -67,7 +68,15 @@ const defaultConfig: Config = {
 
 function render(
   idOrElm: string | HTMLElement,
-  definition: string | UserStoryMap | BusinessModelCanvas | OpportunityCanvas | FourLs | StartStopContinue | Kpt,
+  definition:
+    | string
+    | UserStoryMap
+    | BusinessModelCanvas
+    | OpportunityCanvas
+    | FourLs
+    | StartStopContinue
+    | Kpt
+    | MindMap,
   options?: {
     diagramType?:
       | 'UserStoryMap'
@@ -76,7 +85,8 @@ function render(
       | '4Ls'
       | 'StartStopContinue'
       | 'Kpt'
-      | 'UserPersona';
+      | 'UserPersona'
+      | 'MindMap';
     size?: Size;
     showZoomControl?: boolean;
     showMiniMap?: boolean;

diff --git a/extension/lib/src/model.ts b/extension/lib/src/model.ts
@@ -18,6 +18,15 @@ interface Story {
   release: number;
 }
 
+export interface MindMap {
+  node: Node;
+}
+
+interface Node {
+  text: string;
+  children: Node[];
+}
+
 export interface BusinessModelCanvas {
   keyPartners: CanvasItem;
   customerSegments: CanvasItem;
@@ -85,7 +94,15 @@ interface UrlItem {
 }
 
 export function toString(
-  definition: UserStoryMap | BusinessModelCanvas | OpportunityCanvas | FourLs | StartStopContinue | Kpt | UserPersona
+  definition:
+    | UserStoryMap
+    | BusinessModelCanvas
+    | OpportunityCanvas
+    | FourLs
+    | StartStopContinue
+    | Kpt
+    | UserPersona
+    | MindMap
 ): string {
   return 'activities' in definition
     ? userStoryMap2Text(definition)
@@ -101,11 +118,21 @@ export function toString(
     ? kptCanvas2Text(definition)
     : 'whoAmI' in definition
     ? userPersonaCanvas2Text(definition)
+    : 'node' in definition
+    ? mindMap2Text(definition)
     : '';
 }
 
 export function toTypeString(
-  definition: UserStoryMap | BusinessModelCanvas | OpportunityCanvas | FourLs | StartStopContinue | Kpt | UserPersona
+  definition:
+    | UserStoryMap
+    | BusinessModelCanvas
+    | OpportunityCanvas
+    | FourLs
+    | StartStopContinue
+    | Kpt
+    | UserPersona
+    | MindMap
 ): string {
   return 'activities' in definition
     ? 'UserStoryMap'
@@ -121,6 +148,8 @@ export function toTypeString(
     ? 'Kpt'
     : 'whoAmI' in definition
     ? 'UserPersona'
+    : 'node' in definition
+    ? 'MindMap'
     : 'UserStoryMap';
 }
 
@@ -238,3 +267,17 @@ function userStoryMap2Text(userStoryMap: UserStoryMap): string {
     );
   }, userStoryMap.activities).join('\n')}`;
 }
+
+function mindMap2Text(mindMap: MindMap): string {
+  const node2Text = (node: Node[], indent: number): string[] => {
+    return flatMap(n => {
+      if (n.children.length === 0) {
+        return [`${'    '.repeat(indent)}${n.text}`];
+      }
+
+      return [`${'    '.repeat(indent)}${n.text}`].concat(node2Text(n.children, indent + 1));
+    }, node);
+  };
+
+  return [mindMap.node.text].concat(node2Text(mindMap.node.children, 1)).join('\n');
+}
diff --git a/extension/vscode/README.md b/extension/vscode/README.md
@@ -1,6 +1,6 @@
 # TextUSM
 
-![](https://img.shields.io/badge/Release-v0.0.14-blue.svg?style=flat-square) ![](https://img.shields.io/badge/vscode-^1.33.0-blue.svg?style=flat-square) [![MIT License](https://img.shields.io/badge/license-MIT-blue.svg?style=flat)](LICENSE)
+![](https://img.shields.io/badge/Release-v0.1.0-blue.svg?style=flat-square) ![](https://img.shields.io/badge/vscode-^1.33.0-blue.svg?style=flat-square) [![MIT License](https://img.shields.io/badge/license-MIT-blue.svg?style=flat)](LICENSE)
 
 TextISM is a simple tool. Help you draw user story map using indented text.
 
@@ -10,6 +10,7 @@ TextISM is a simple tool. Help you draw user story map using indented text.
 - 4Ls Retrospective
 - Start, Stop, Continue Retrospective
 - KPT Retrospective
+- Mind Map
 
 ![image](./img/textusm.gif)
 
@@ -134,6 +135,22 @@ Try
 
 ![image](./img/kpt.png)
 
+### MindMap
+
+```
+TextUSM
+    WORK QUICKLY
+        Draw diagrams without leaving the keyboard.
+    SAVE TIME
+        Instantly visualize your ideas.
+    EXPORT TO IMAGES
+        Images can be exported as png or svg.
+    SHARING
+        Share your diagrams online with your colleagues.
+```
+
+![image](./img/mmp.png)
+
 ## Options
 
 ```json