added manual

README.md

@@ -1,120 +1,62 @@
-# diagram
-
-Generating diagram from yaml/markdown.
-
-[Live Demo is avalable here!](http://awis.me/diagram/#diag=eyJkaWFncmFtIjoiZGVmYXVsdDpcbiAgd2lkdGg6IDEwMFxuICBoZWlnaHQ6IDEwMFxuICB0b3A6IDEwMFxuICBsZWZ0OiAxMDBcbiAgcGFkZGluZy1sZWZ0OiAxMHB4XG4gIHBhZGRpbmctcmlnaHQ6IDEwcHhcbm5vZGVzOlxuICBuMTpcbiAgICB0b3A6IDdweFxuICAgIGxlZnQ6IDg4cHhcbiAgICBib3JkZXI6IDBweFxuICAgIGhlaWdodDogMTIwXG4gICAgd2lkdGg6IDEyMFxuICAgIGJveC1zaGFkb3c6IDBweCAwcHggMHB4XG4gIG4yOlxuICAgIHRvcDogOHB4XG4gICAgbGVmdDogNzI4cHhcbiAgICBib3JkZXI6IDJweCBkYXNoZWQgZ3JlZW5cbiAgICB3aWR0aDogMjAwXG4gICAgaGVpZ2h0OiAyMDBcbiAgICBib3JkZXItcmFkaXVzOiAwXG4gIG4zOlxuICAgIHRvcDogMzkzcHhcbiAgICBsZWZ0OiA3NXB4XG4gICAgaGVpZ2h0OiAxNDBcbiAgICB3aWR0aDogMTAwXG4gICAgdGV4dC1hbGlnbjogbGVmdFxuICBuNTpcbiAgICB0b3A6IDExMHB4XG4gICAgbGVmdDogMjQycHhcbiAgICBoZWlnaHQ6IDE2MFxuICAgIHdpZHRoOiAzMDBcbiAgICBsaW5lLWhlaWdodDogMTZweFxuICAgIHRleHQtYWxpZ246IGxlZnRcbiAgbjQ6XG4gICAgdG9wOiAyODNweFxuICAgIGxlZnQ6IDYzNHB4XG4gICAgaGVpZ2h0OiAyNTBcbiAgICB3aWR0aDogMzAwXG4gICAgdGV4dC1hbGlnbjogbGVmdFxuICAgIGJhY2tncm91bmQtY29sb3I6IHllbGxvd1xuICAgIGJvcmRlcjogMHB4XG4gICAgei1pbmRleDogMVxuZWRnZXM6XG4gIC0gZnJvbTogbjFcbiAgICB0bzogbjJcbiAgICBsYWJlbDogMu+4j+KDo1xuICAgIHBhaW50U3R5bGU6XG4gICAgICBzdHJva2VXaWR0aDogMVxuICAgICAgc3Ryb2tlOiByZWRcbiAgLSBmcm9tOiBuMlxuICAgIHRvOiBuM1xuICAgIGxhYmVsOiBjcmVhdGVcbiAgLSBmcm9tOiBuM1xuICAgIHRvOiBuMVxuICAtIGZyb206IG41XG4gICAgdG86IG4xXG4iLCJuMSI6Im4xIGlzIGEgbm9kZSB3aXRob3V0IGJvcmRlclxuXG4hW10oaHR0cHM6Ly9wMy5pdGMuY24vcV83MC9pbWFnZXMwMy8yMDIxMDgyNC80OTFmODU3MzE2M2I0ZTlhYTk1YjQ2NTgzOTcyNmQzNC5wbmcpXG5cbiIsIm4yIjoibjJcblxuIVtdKGh0dHBzOi8vd3d3Lmpzb24ub3JnL2ltZy9qc29uMTYwLmdpZiBcIjEwMFwiKVxuXG5gYGBjc3NcbmJvcmRlci1yYWRpdXM6IDBcbmBgYFxudG8gbWFrZSBzcXVhcmUgYm9yZGVyXG4iLCJuMyI6Im4zXG5cbiFbXShodHRwczovL2F2YXRhcnMuZ2l0aHVidXNlcmNvbnRlbnQuY29tL3UvMzExMzk3P3Y9NCBcIjUwXCIpXG5cbk5vdGUgaG93IHRvIHNldCB0aGUgd2lkdGggb2YgdGhlIGVtYmVkZGVkIHBpY3R1cmUuIiwibjUiOiIhW10oaHR0cHM6Ly90c2UzLW1tLmNuLmJpbmcubmV0L3RoL2lkL09JUC1DLkdSMzVGb2MxbjBnQVA2LUhuWF9CRGdIYUhhP3BpZD1JbWdEZXQmcnM9MSBcIjMwXCIpICpOb3RlKlxuMS4gRHJhZyZkcm9wIG5vZGUgdG8gcmUtcG9zaXRpb24gaXRcbjIuIERvdWJsZSBjbGljayBhIG5vZGUgdG8gZWRpdCBpdFxuMy4gU2VsZWN0ICdkaWFncmFtJyBpbiBkcm9wZG93biB0byBzdHlsZSBpdFxuXHQtIGN1c3RvbWl6ZSBub2RlIHNpemUgYW5kIGFwcGVyYW5jZSBcbiAgICAtIGN1c3RvbWl6ZSBsaW5rcyBiZXR3ZWVuIG5vZGVzXG40LiBmb3IgZXhhbXBsZTogYWRqdXN0XG5gYGBsaW5lLWhlaWdodDogMTZweGBgYCB0byBzZXQgbGluZSBoZWlnaHQuIiwibjQiOiIqbjQqXG5cbm5vdGUgaXMgZGVmaW5lZCBpbiBtYXJrZG93blxueW91IGNhbiBldmVuIHB1dCBhIHRhYmxlIGluIG5vZGU6XG5cbnwgdGVybSB8IGRlc2NyaXB0aW9uIHxcbnw6LS0tLS0tLXw6LS0tLS0tOnxcbnwgIG5vZGUgfCBhIHdpbmRvdyB3aXRoIHBpYyBhbmQgdGV4dHxcbnwgIGVkZ2UgfCBjb25uZWN0aW9uIGJldHdlZW4gdHdvIG5vZGVzfFxuXG4tLS1cbiogdXNlIHotaW5kZXggdG8gYnJpbmcgbm9kZSBiYWNrL2Zyb250XG4qIGN1c3RvbWl6ZSBiYWNrZ3JvdW5kLWNvbGVyXG5cbiFbXShodHRwczovL3RzZTItbW0uY24uYmluZy5uZXQvdGgvaWQvT0lQLUMuNzhtdDNwd2NTRHNpNEYwaDFvN2c0d0hhSGE/cGlkPUltZ0RldCZ3PTE4MCZoPTE4MCZycz0xIFwiNDVcIikifQ==)
-# The Idea
-
-* A diagram is a collection of nodes and edges. 
-* A node is a diagram without sub nodes and edges.  
-* A node is defined by a markdown file.
-  *  In the front matter section:
-     *  style: the attributes for the node, for example size, location, color, text align etc. 
-     *  nodes: list of sub nodes.  
-     *  edges: direction, style, label.
-  *  In the markdown body: the content of the node.
-* The location of one node can either be customized by modifying parameters in the markdown file, or drag & drop the generated node in the diagram. In the later case, the related paremeters, say ```top``` and ```left``` in markdown will be updated automatically.
-* The diagram can be exported in ```permlink``` address. All the information in the markdowns will be embedded in the exported URL. You can share the URL as a copy of the editable version of the diagram.
+# Markgraph
 
-```yaml
----
-name: node1
-note: some tags or note
-follow:
-  - parent1
-  - parent2
-  - parent3
-nodes:
-  - n1
-  - n2
-  - n3
-  - n4
-edges:
-  - from: n1
-    to: n2
-    label: 2️⃣
-    paintStyle:
-      strokeWidth: 1
-      stroke: red
-  - from: n2
-    to: n3
-    label: create
-  - from: n3
-    to: n1
-style:
-  left: 626px
-  top: 293px
----
+Markgraph stands for Markdown Graph Notes.
 
-The content of node 1 in markdonw format
-```
-# Quick Start 
+[Live Demo is avalable here!](http://awis.me/diagram/)
 
-1. modify each of the markdown file to define the content of each node
-2. copy the link address of the ```permlink``` and save it for future reference or sharing with friends. 
+Please find a number of key features below:
 
-## diagram define example
+- Markdown
+	- Markdown for writing document.
+- Graph
+	- Mermaid to draw diagrams
+	- Connect nodes to draw complex diagrams.
+
+    Each document is a node, one node can have a number of sub nodes. The subnodes can be connected via arrows in different color, style etc.
+- Notes
+	- There is no server needed. The app is a single page app running in your browser.
+    - Every keystroke will be saved within one second.
+    - Git like time machine to keep changes saved as snapshots, you can always go back to a previous snapshot.
+	- Easy to import and export via a single text file.
+	- Easy to share the document via an URL.
+
+## Terms used in markgraph
 
+Workspace
+:  All the document you can access in markgraph UI. In the workspace, there is at least one Notes.
 
-## node define example
+Notes
+:  A collection of document. There maybe several notes in the workspace. You can switch by selecting in the explorer. 
 
-```Markdown
-![](https://www.json.org/img/json160.gif)
-JSON
-```
+Node
+:  A node is a document. It can have sub nodes ( sub documents) too.
 
-# TODO
+Snapshot
+:  A copy of the workspace.
 
-- [x]  Use permlink to share editable diagram. URL parameter format:  ```diag=.... ``` while the value is a serialized json object with below format:
+Explorer
+:  A list view to show notes in current workspace, or nodes under current notes.
 
-```json
-{
-    "n1": "Markdown format string to define the format of node n1",
-    "n2": "Markdown format string to define the format of node n2",
-    ...
-}
-```
+Editor
+:  An area for editing node. 
 
-# HOWTO
+Canvas
+:  The area to show the preview version of the node.
 
-## backup your drawing
+Outline
+:  Showing a list of nodes, click on one item will jump to that node.
 
-Diagram internally use browser localStorage to keep the latest version of drawing.  
-There are 3 kinds of URLs.
+## User's Manual
 
-1. https://awis.me/diagram/
-2. https://awis.me/diagram/#diag=base64_encoded_diagram_data
-3. https://awis.me/diagram/#filename1
+[The Manual itself is created using markgraph, and it is available online.](http://awis.me/diagram/) 
 
-The first one and second one are using the default local storage key. Any modification to the diagram will update the local storage default file immediately.
+Please find below some screen capture of the manual.
 
-The third one explicitly choose a local storage key.
-
-If you need to edit multiple diagrams simutaniously, it's safe to use hash plus filename scheme in the URL.
-# Developement
-
-## Unit test
-
-```
-npx jest --no-cache --verbose
-```
-
-## Build
-
-```
-npm run build
-```
-
-## Deploy
-
-The deployment is easy, just build it and put all the generated files under /dist into your web server and it's done.
-
-If you are in a hurry, you can get a pre-built version below: 
-
-https://github.com/xu4wang/xu4wang.github.io/tree/master/diagram
-
-Also, you can always use my deployed version.
-
-https://awis.me/diagram
+![](doc/architecture.jpg)
+![](doc/tasks.jpg)
+![](doc/markgraph.jpg)
+![](doc/mermaid.jpg)
+![](doc/import.jpg)
+![](doc/share.jpg)
 
 

package.json

@@ -34,6 +34,7 @@
     "@rollup/plugin-node-resolve": "^11.2.1",
     "codemirror": "^5.13.4",
     "eslint": "^7.0.0",
+    "highlight": "^0.2.4",
     "jest": "^28.1.1",
     "js-yaml": "^4.1.0",
     "merge-deep": "^3.0.3",

src/build.js

@@ -17,5 +17,6 @@ shell.cp('node_modules/codemirror/lib/codemirror.css', 'dist/');
 shell.cp('library/jsplumb/*', 'dist/');
 shell.cp('library/clusterize.js/*', 'dist/');
 shell.cp('library/sweetalert2.all.min.js', 'dist/');
+shell.cp('doc/*', 'dist/');
 
 

src/diagram/diagram.css

@@ -355,12 +355,12 @@ input{
   font-family: Inter,sans-serif;
   font-size: 12px;
   font-weight: 700;
-  justify-content: center;
+  justify-content: left;
   line-height: 1;
   margin: 0;
   outline: none;
   padding: 0.5rem 0.5rem;
-  text-align: center;
+  text-align: left;
   text-decoration: none;
   transition: box-shadow .2s,-webkit-box-shadow .2s;
   white-space: nowrap;

src/diagram/model/db.js

@@ -83,7 +83,8 @@ function current_time_str() {
 
 
 async function update_doc(k, v) {
-  all_docs.active[k] = await add_version(k, v, all_docs.active[k]);
+  //all_docs.active[k] = await add_version(k, v, all_docs.active[k]);
+  all_docs.active[k] = await add_version(k, v);
   let t = current_time_str();
   all_docs.versions[k] = all_docs.versions[k] || {};
   t = Object.keys(all_docs.versions[k]).length + '-' + t;

src/diagram/view/node.js

@@ -19,8 +19,24 @@ mdrenderer.use(markdownItImageSize);
 */
 
 const { Remarkable } = require('remarkable');
+//var hljs = require('highlight.js'); // https://highlightjs.org/
+
 const { escapeHtml } = require('remarkable').utils;
-var md2html = new Remarkable();
+var md2html = new Remarkable('full', {
+  html:         false,        // Enable HTML tags in source
+  xhtmlOut:     false,        // Use '/' to close single tags (<br />)
+  breaks:       false,        // Convert '\n' in paragraphs into <br>
+  langPrefix:   'language-',  // CSS language prefix for fenced blocks
+  linkify:      true,         // autoconvert URL-like texts to links
+  linkTarget:   '',           // set target to open link in
+
+  // Enable some language-neutral replacements + quotes beautification
+  typographer:  true,
+
+  // Double + single quotes replacement pairs, when typographer enabled,
+  // and smartquotes on. Set doubles to '«»' for Russian, '„“' for German.
+  quotes: '“”‘’'
+});
 const mermaid = require('mermaid');
 const mermaidAPI = mermaid.mermaidAPI;
 

src/diagram/view/outline.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var m = require('../model/model');
-let canvas = require('./canvas');
+//let canvas = require('./canvas');
 
 //var cmenu = require('./contextmenu');
 
@@ -14,7 +14,8 @@ let locked = false;
 let is_locked = false;
 
 function cb(e) {
-  let id =  e.target.innerHTML;
+  let id =  e.target.id;
+  id = id.substring(0, id.length - '__OUTLINE__'.length);
   m.set_active_document(id);
 }
 
@@ -41,20 +42,28 @@ function clear_all_btn() {
   }
 }
 
-var display = 'block';
+//var display = 'block';
 
 function set_attr(name, val) {
   ele.style[name] = val;
+  /*
   if (name === 'display') {  //ugly hack for auto hide outline if there is no subnodes.
     display = val;
   }
+  */
 }
 
 
 function update_buttons() {
   if (!locked) {
-    clear_all_btn();
-    let nodes = m.get_subnode_names(canvas.get_currect_doc());
+    let nodes = m.get_outline();
+    if (Object.keys(nodes).length !== 0) {  //only change outline if current doc has it.
+      clear_all_btn();
+      for (let n of Object.keys(nodes)) {
+        add_button(n, nodes[n], 'button-outline');
+      }
+    }
+    /*
     if (nodes.length === 0) {
       //auto hide
       //display = ele.style['display'];
@@ -66,6 +75,7 @@ function update_buttons() {
         add_button(n, n, 'button-outline');
       }
     }
+    */
   }
 }
 
@@ -85,6 +95,10 @@ m.on('ACTIVE-DOCUMENT', () => {
   }
 });
 
+m.on('OPEN-NOTES', () => {
+  clear_all_btn();
+});
+
 exports.set_attr = set_attr;
 exports.lock = lock;
 

src/diagram/view/toolbar.js

@@ -88,7 +88,7 @@ function btn_listener(e) {
   }
 }
 
-function add_button(name, label, cb, classname) {
+function add_button(name, label, cb, classname, init_clicks) {
   //add button DOM and listener
   name += '__TOOLBAR__';
   classname = classname || 'button-system';
@@ -100,6 +100,10 @@ function add_button(name, label, cb, classname) {
     childNode.id = name;
     container_ele.appendChild(childNode);
     childNode.addEventListener('click', cb);
+    init_clicks = init_clicks || 0;
+    for (let k = 0; k < init_clicks;  k++) {
+      childNode.click();
+    }
   }
 }
 
@@ -267,8 +271,8 @@ function add_tools() {
   //add button
   //remove button
   add_button('__SYSTEM_HOME', 'Notes', exe_notes, false);  //false means not a user button.
-  add_button('__SYSTEM_EXPLORER', 'Explorer', function (e) { exe_show_hide(e, 'explorer', explorer); }, false);  //false means not a user button.
-  add_button('__SYSTEM_EDITOR', 'Editor', function (e) { exe_show_hide(e, 'editor',  editor); }, false);  //false means not a user button.
+  add_button('__SYSTEM_EXPLORER', 'Explorer', function (e) { exe_show_hide(e, 'explorer', explorer); }, false, 1);  //false means not a user button.
+  add_button('__SYSTEM_EDITOR', 'Editor', function (e) { exe_show_hide(e, 'editor',  editor); }, false, 1);  //false means not a user button.
   add_button('__SYSTEM_BACKUP', 'Backup', exe_backup, 'button-dark');  //false means not a user button.
   add_button('__SYSTEM_RESTORE', 'Restore', exe_restore, 'button-dark');  //false means not a user button.
   add_button('__SYSTEM_SHARE', 'Share', exe_share, 'button-system');  //false means not a user button.