Here is a simple diagram
in the main drawing UI (also known as the "structure editor"), in which it can be adjusted and extended, and in the code editor, where you can experiment with the code. (There is no need
to sign in to experiment - but signing in is required to save your work.)

This example illustrates building a diagram using operations defined by its diagram type. Diagram types are external components,
rather than anything built into the ProtoPedia platform itself. The platform allows adding as many diagram types as you like, each with its own API.
In this case, the diagram type is a network - a collection of nodes
connected by arrows or lines, defined in /diagram/graph.js. Such a structure is referred to as a graph in mathematical terminology. In this terminology the nodes are called "vertices"
and the connectors "edges" - a terminology adopted in the API.

pj The ProtoPedia implementation is installed under the one global variable, prototypeJungle,
with pj as a synonym (like $ for jQuery). Furthermore, the ProtoPedia implementation
is itself a prototype tree,
with functionality allocated under children such as pj.geom, pj.svg, and pj.ui.

Aside:Doing things this way may seem old-school
in that it forgoes use of
flexible module systems such as
commonJS,
AMD, or
ES6 modules.
However, the hierarchical nature
of the implementation is needed for the serialization scheme to work properly, so this flexibility is sacrificed
for a reason.
Of course, whatever module system is preferred may be used in
projects which include the prototypeJungle libraries. Ironically, ProtoPedia
has its own module-like capability in pj.require, but this is used in external contexts, not the construction of the prototypeJungle tree
itself.

pj.require(...
binds the variables graphP, circlePP and arrowPP to the components defined in '/diagram/graph.js', '/shape/circle.js', and
'/shape/arcArrow.js', respectively. Moving on:

var item = svg.Element.mk('<g/>');// the root of the diagram we are assembling

installs an instantiation of the graph component under the root. Instantiation, a fundamental operation in
ProtoPedia, is explained here.

item.set('name',ch) has the effect of item.name = ch, but also assigns item as the parent of
ch (ProtoPedia items are trees, as explained
here).

var circleP = graph.installAsVertexPrototype(circlePP);

This defines the prototype that will be used for vertices in this graph as a circle. Note that installAsVertexPrototype is a method
of the graph component, defined externally to the ProtoPedia platform.

moves the resulting circle to the given position. __moveto and geom.Point.mk are operations defined by the platform.

circle2 is created and moved analogously.

graph.connectVertices(circle1,circle2);

instantiates the edge prototype (in this case an arrow), and connects its ends to circle1 and circle2 respectively.
graph.connectVertices(circle2,circle1); runs an arrow in the other direction.

The diagram can also be constructed without use of the graph component, but then the arrows won't be automatically
updated with dragging of the circles - the graph component handles that. This more direct approach is presented here to give a better feeling
for how to build things outside of the context of particular diagrams. The approach involves these alternative snippets of code for introducing the circles and arrows: