Create New Path Diagram

For page specific messages
For page author info



Help A powerful tool for creating a flow diagram-like page. You can use it to create a learning path page, for example.

Path page vs Path Diagram

A Path is a page with an embedded item named Path Diagram. A Path Diagram has draggable and resizable rectangular boxes (nodes) of content connected by lines or arrows at one or more of the four connection handles.

A Path Diagram is NOT an image, but like an image it is created by Path Diagram Editor embedded within the Path page editor. That is why you see a separate Launch/Quit editor menu bar inside the Path page (right after the main body).

Save and reuse

Even when you are viewing someone else's path page, you can edit and save the embeded path diagram into your workspace. On your path page, you can browse and insert a path diagram from your workspace.

[Note: This page lets you create only a path diagram and save. To create a path page, use 'Add content' link in right sidebar, or 'Workspace' link in top menubar.]

See also

The embedded Path Diagram editing tool is based on a minimalistic browser-based flowchart editor zNode. There are many other online tools with powerful drawing features (e.g., Gliffy, Draw, Diagramo), but we think that simple boxes with  HTML editor for box-content is easy to use and will serve the purpose.

Exclude node summary : 

{"directedAll":false, "directedFromNow":false, "nodes" : [{"id" : 0, "x" : 285, "y" : 40, "width" : 338, "height" : 127, "txt" : "<p>This single <strong>root node</strong> is <span style="&amp;#34;color:">undeletable</span>, <span style="&amp;#34;color:">draggable</span> and <span style="&amp;#34;color:">resizable</span>.</p> <p>To <strong>edit</strong> its content, or add more connected/isolated nodes, click the &amp;#34;<span style="&amp;#34;color:"><strong>Launch editor</strong></span>&amp;#34; button in path diagram editors menu bar.</p> <p>To explore features, see this <a title="&amp;#34;A" sample="" path="" href="&amp;#34;;#34;">sample path</a>.</p>"}], "connections" : []}