Shown below are screenshots from a electronic copy of "Quantum Computation and Quantum Information", by Nielson and Chaung, which is the closest thing quantum computing has to a definitive reference book. This is the list of symbols given in the introduction, and it's used fairly universally as a guide for graphical descriptions of quantum computation operations.

- Illustrator doesn't know what LaTeX is and Tex doesn't know what a line is
- tables with mathjax elements and geometron elements show power of html
- export to svg can go to illustrator, web, powerpoint, latex, markdown, gds2, email
- geometron engine can connect Quil or other quantum code with graphics instantly in real time, which can be manipulated to be useful also in real time

The following is a reproduction of the table from Nielson and Chuang, but with everything built in html. It is an html table, where each mathematical expression is represented with LaTeX, typeset using the Mathjax javascript library, and all the symbols are created using the Geometron geometrical language which I am advertising here.
## Quantum Computing Symbols

Hadamard | $$ \frac{1}{\sqrt{2}}\left(\begin{matrix} 1 & 1 \\ 1 & -1\\ \end{matrix}\right) $$ | |

Pauli-X | $$ \left(\begin{matrix} 0 & 1 \\ 1 & 0\\ \end{matrix}\right) $$ | |

Pauli-Y | $$ \left(\begin{matrix} 0 & -i \\ i & 0\\ \end{matrix}\right) $$ | |

Pauli-Z | $$ \left(\begin{matrix} 1 & 0\\ 0 & -1\\ \end{matrix}\right) $$ | |

Phase | $$ \left(\begin{matrix} 1 & 0\\ 0 & i\\ \end{matrix}\right) $$ | |

$$\frac{\pi}{8}$$ | $$ \left(\begin{matrix} 1 & 0\\ 0 & e^{i\pi/4}\\ \end{matrix}\right) $$ | |

controlled-NOT |
$$ \left(\begin{matrix} 1 & 0 & 0 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 0 & 1 \\ 0 & 0 & 1 & 0 \\ \end{matrix}\right) $$ | |

swap | $$ \left(\begin{matrix} 1 & 0 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 0 & 1 \\ \end{matrix}\right) $$ | |

controlled-Z | $$ \left(\begin{matrix} 1 & 0 & 0 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & -1 \\ \end{matrix}\right) $$ | |

controlled-phase | $$ \left(\begin{matrix} 1 & 0 & 0 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & i \\ \end{matrix}\right) $$ | |

Toffoli | $$ \left(\begin{matrix} 1 & 0 & 0 & 0 & 0 & 0 & 0 & 0\\ 0 & 1 & 0 & 0 & 0 & 0 & 0 & 0\\ 0 & 0 & 1 & 0 & 0 & 0 & 0 & 0\\ 0 & 0 & 0 & 1 & 0 & 0 & 0 & 0\\ 0 & 0 & 0 & 0 & 1 & 0 & 0 & 0\\ 0 & 0 & 0 & 0 & 0 & 1 & 0 & 0\\ 0 & 0 & 0 & 0 & 0 & 0 & 0 & 1\\ 0 & 0 & 0 & 0 & 0 & 0 & 1 & 0\\ \end{matrix}\right) $$ | |

Fredkin | $$ \left(\begin{matrix} 1 & 0 & 0 & 0 & 0 & 0 & 0 & 0\\ 0 & 1 & 0 & 0 & 0 & 0 & 0 & 0\\ 0 & 0 & 1 & 0 & 0 & 0 & 0 & 0\\ 0 & 0 & 0 & 1 & 0 & 0 & 0 & 0\\ 0 & 0 & 0 & 0 & 1 & 0 & 0 & 0\\ 0 & 0 & 0 & 0 & 0 & 0 & 1 & 0\\ 0 & 0 & 0 & 0 & 0 & 1 & 0 & 0\\ 0 & 0 & 0 & 0 & 0 & 0 & 0 & 1\\ \end{matrix}\right) $$ | |

Measurement |

All that was in the canvas elements in html. I now want to investigate what can be done in svg elements.

.svg code ready for copy/paste: And another example:

- smoothly integrate into latex documents for papers
- smoothly integrate into Powerpoint and Keynote for presentations
- be easily and transparently modified and republished by other researchers so the symbol vocabulary can evolve and specialize as needed
- Convert with some automation between geometron code for symbols and executable quantum processor code such as Quil from Rigetti Computing
- Have joined line segments in paths that avoid weird looking breaks
- Be clearly enough documented that everyone in the field can get minimal literacy in the system with minimal levels of effort
- Close the hardware loop by including .svg data which describes microfabricated devices, and embedding the code that describes those devices in the device itself in metal-on-silicon using Roctal encoding

Being easy to modify and building a remix culture where QI researchers are constantly updating and maintaining the library is all about two things: good help files, and good book keeping. I think the path to the first of these is to just write it and start bugging people in the field to try it out and debug the docs to the point that they find it non-frustrating. The path to the second is to target the huge groups who already employ front end web people, and pitch this as a marketing type project to make their web site look better. That means private sector groups, which rely on PR for survival and have pretty looking websites. The ideal "customer" is a organization that already has a information pipeline between the front end web people who know javascript and the quantum information researchers who are constantly trying to get the outside world to care about their work. Initially this software will mainly be used to smooth out this pipeline.

The closing of the hardware loop is not needed for deployment in the community but I personally need it for the documentation on SQUID and tunnel junction stuff that I'm writing up now. I really want to do this but it's not needed for this project, I'll deploy it in the other projects.

- Write an academic-ish paper documenting the idea and the implementation
- Create standard documentation online with a coherent github repository so that it's smooth to get new people to start it
- Make fully live examples where users can create their own gate diagrams online and extract the .svg without even downloading or editing anything--just edit in the browser and copy-paste into a text file and save as .svg
- Academic paper must address the
*concept*of the "art stack" in computer science, the importance of human-to-human graphical communication in the actual functioning of the physical processor - Create some type of online forum where users can communicate and share/build this thing, preferably on Github so that I don't have to build a whole system

- classical gates, all of them
- flowchart constructor
- digraph constructor
- online electronic lab notebook

Look at those ugly corners!! When blown up like this and set alone in a canvas it might look like an intentional effect to generate some kind of retro pixel game graphics, but in a technical diagram for publication, presenting this as a "square" should be unacceptable at any scale. To understand the problem I must show the code that made this. It is the shape I put at 0200 in the shape table, which is used for all symbol glyph containers. It's bytecode is, in Geometron format:

0200:0304,0342,0330,0334,0342,0330,0334,0342,0330,0334,0342,0330,0334Or, in symbol glyphs,

The square as used in the standard symbol glyphs is made up of discrete segments, each of which is terminated at each end. In canvas these segments are built with the following code:

ctx.beginPath(); ctx.moveTo(x,y); ctx.lineTo(x + side*Math.cos(theta),y + side*Math.sin(theta)); ctx.stroke(); ctx.closePath(); var x2 = Math.round(x + side*Math.cos(theta)); var y2 = Math.round(y + side*Math.sin(theta));The line in the svg for one of these might look like this:

< line x1="212" y1="168" x2="194" y2="168" style="stroke:black;stroke-width:2"> < /line>To make this square into a single entity we need to extend the path element in canvas into multiple operations of the main Geometron function, and in the svg we need to switch from "line" to "path". The path element in svg uses very efficient but also opaque nomenclature which must be deciphered to make this a transparrent function. Also, in both the svg and the canvas we need to use another two fundamental Geometron operations, the begin and end path operators. Finally to make it faster to build useful closed loops we need to add elements to the shape table which both draw and move at the same time, which will be symbolized by arrows in the command shape table. Here are the symbols for those:

So to make a square, combining the above spellings, would be:

where

The issue which requires great care here is distinguishing when an action is in a path and when it isn't. Circles and dots are always self-contained entities. Therefore in terms of fundamental drawing actions, this means line segments and arcs(of less than \(2\pi\)). There are two basic ways to do this. One is to use a separate command for line segments in a path than line segments on their own. In this case the symbol for line segment is modified for maximum clarity to give:

Or, in octal bytecode:

0201:0344,0330

The other method of dealing with this is to add a global boolean variable called `inPath`, which is set to `false` in the initialization then again in the end path command `0363` and to `true` in the start path command `0362`. While this is in some ways more complicated, as if statements must be added inside `0342` and `0343`, it has the advantage that bytecode can be more easily recycled from a version made of all self contained line segments when it's transformed into a cleaner path-based version. In some sense this shows the strength of the Geometron approach. By making the code easy to understand and expecting all users to edit all aspects of it from scratch in every instance, it is easy to make the code behave *exactly* correctly for each specific application.

Similarly, the command to end a path given by `0363` can be modified inside the function `doTheThing(localCommand)` by the user every time to decide how and if closed paths should be filled. In general fill properties are modified by the commands in the `032x` row but in many cases a whole Geometron instance will use a single type of fill(or lack thereof) and it makes sense to at least take a look at what is in `0363` each time to be sure it's right.

With that excessive digression, I now ask what is the exact right implementation for quantum computing theory and design? By default, nothing should be filled, and all line segments should be part of a path which is manually started and ended to make it export well. There are also times where it clearly makes sense to have a self contained line segment be easily usable, as in the definition of the various swap gates. Thus the default should be no fill, filled circle will be a special case from empty circle and will be at address `0367`, and there will be two types of line segment, with symbols as defined above. To avoid any degeneracy in notation, `0201` will be the isolated segment and `0203` will be segment that is part of a path and `0202` is the cross hatch symbol used to modify the various symbol glyphs to put things in a path. Likewise we need a filled arc, which will be stored at addresses `0345` and `0346` for the two directions of arc(this matters when in a path).

0204:0362,0203,0334,0203,0334,0203,0334,0203,0334,0363,

or

Now to actually try it, first in a canvas element:

That looks good, even with the very wide line width. Now try an svg element.

And here is the result of copy/pasting the above svg code into a .svg file with a text editor then opening it in a gds editor(http://www.layouteditor.net):

This closes the loop with fabrication! It is now possible to directly create a thing in a browser and then move it to .gds format and turn it into metal-on-silicon, or to gerber file format and turn it into copper-on-pcb. This can be used both for direct layout design and more importantly for encoding of information on layouts to track design information in the physical world.

Now for an example of building word-in-box structures using a pair of common icons from quantum information theory, Alice and Bob:

Since some tweaking was required to make this, let's take a closer look at what that tweaking was.

Here is the naive application of the square drawing command and the word command:

Without any extra commands, the square and the text both have size set by the global "side", so they're the same. Also with the same coordinates, the text is outside the box. This is an important application of a fundamental operation in geometron, the shrunken move. Also, we'll use scaling outside the standard doubling. I now jump to a demonstration: