Example diagram at new start

Architype.js

@@ -44,7 +44,7 @@ class Architype {
       this.unserialize(JSON.parse(localStorage.getItem('currentState')));
     }
     if (this.editor_.getEntries().length == 0) {
-      this.editor_.addHelpAfter();
+      this.addDefaultEntries();
     }
 
     this.observer_ = new MutationObserver(e => { this.onChange(e); });
@@ -160,6 +160,34 @@ class Architype {
     localStorage.setItem('currentState', this.serializedStr_);
   }
 
+  addDefaultEntries() {
+    this.editor_.addHelpAfter();
+
+    let node1 = this.editor_.addNodeAfter();
+    node1.setLabel('node1');
+
+    let node2 = this.editor_.addNodeAfter();
+    node2.setLabel('node2');
+
+    node1.setHighlight(true);
+    node2.setHighlight(true);
+    let link = this.editor_.addLinkAfter();
+    link.setLabel('link1');
+    node1.setHighlight(false);
+    node2.setHighlight(false);
+
+    let node3 = this.editor_.addNodeAfter();
+    node3.setLabel('node3');
+
+    node2.setHighlight(true);
+    node3.setHighlight(true);
+    let group = this.editor_.addGroupAfter();
+    group.setLabel('group1');
+
+    let label = this.editor_.addLabelAfter();
+    label.setLabel('Example');
+  }
+
   setTheme(theme) {
     this.container_.classList.remove('theme-' + this.getTheme());
     this.container_.classList.add('theme-' + theme);

Editor.js

@@ -62,78 +62,69 @@ class Editor extends List {
 
   addNodeAfter(...rest) {
     if (this.mayAdd(EditorNode)) {
-      EditorNode.addAfter(this.container_, this.getSelected(), ...rest);
-      return true;
+      return EditorNode.addAfter(this.container_, this.getSelected(), ...rest);
     }
-    return false;
+    return null;
   }
 
   addNodeBefore(...rest) {
     if (this.mayAdd(EditorNode)) {
-      EditorNode.addBefore(this.container_, this.getSelected(), ...rest);
-      return true;
+      return EditorNode.addBefore(this.container_, this.getSelected(), ...rest);
     }
-    return false;
+    return null;
   }
 
   addLabelBefore() {
     if (this.mayAdd(EditorLabel)) {
-      EditorLabel.addBefore(this.container_, this.getSelected());
-      return true;
+      return EditorLabel.addBefore(this.container_, this.getSelected());
     }
-    return false;
+    return null;
   }
 
   addLabelAfter() {
     if (this.mayAdd(EditorLabel)) {
-      EditorLabel.addAfter(this.container_, this.getSelected());
-      return true;
+      return EditorLabel.addAfter(this.container_, this.getSelected());
     }
-    return false;
+    return null;
   }
 
   addLinkAfter() {
     if (this.mayAdd(EditorLink)) {
-      EditorLink.addAfter(this.container_, this.getSelected(),
-                          this.queryEntries('.highlight', EditorNode));
-      return true;
+      return EditorLink.addAfter(this.container_, this.getSelected(),
+                                 this.queryEntries('.highlight', EditorNode));
     }
-    return false;
+    return null;
   }
 
   addLinkBefore() {
     if (this.mayAdd(EditorLink)) {
-      EditorLink.addBefore(this.container_, this.getSelected(),
-                           this.queryEntries('.highlight', EditorNode));
-      return true;
+      return EditorLink.addBefore(this.container_, this.getSelected(),
+                                  this.queryEntries('.highlight', EditorNode));
     }
-    return false;
+    return null;
   }
 
   addGroupAfter() {
     if (this.mayAdd(EditorGroup)) {
-      EditorGroup.addAfter(this.container_, this.getSelected(),
-                           this.queryEntries('.highlight', EditorNode));
-      return true;
+      return EditorGroup.addAfter(this.container_, this.getSelected(),
+                                  this.queryEntries('.highlight', EditorNode));
     }
-    return false
+    return null;
   }
 
   addGroupBefore() {
     if (this.mayAdd(EditorGroup)) {
-      EditorGroup.addBefore(this.container_, this.getSelected(),
-                            this.queryEntries('.highlight', EditorNode));
-      return true;
+      return EditorGroup.addBefore(this.container_, this.getSelected(),
+                                   this.queryEntries('.highlight', EditorNode));
     }
-    return false;
+    return null;
   }
 
   addHelpAfter() {
     if (this.mayAdd(EditorHelp)) {
-      EditorHelp.addAfter(this.container_, this.getSelected());
-      return true;
+      return EditorHelp.addAfter(this.container_, this.getSelected());
     }
-    return false;
+    return null;
   }
   
   onKeyDown(e) {

EditorEntryBase.js

@@ -56,12 +56,14 @@ class EditorEntryBase extends ListenUtils {
     let entry = new this(null, ...rest);
     container.insertBefore(entry.getElement(), elem);
     entry.afterDomAdd();
+    return entry;
   }
 
   static addAfter(container, elem, ...rest) {
     let entry = new this(null, ...rest);
     container.insertBefore(entry.getElement(), elem ? elem.nextSibling : null);
     entry.afterDomAdd();
+    return entry;
   }
 
   static unserialize(ser) {