I often use tikzcd to make images for blog posts (which aren't written in LaTeX). It would be awesome if I could directly save an SVG, PDF, or really anything from the app.

Here is a complete log:

tikzcd-editor λ npm install, and:

npm WARN old lockfile 
npm WARN old lockfile The package-lock.json file was created with an old version of npm,
npm WARN old lockfile so supplemental metadata must be fetched from the registry.
npm WARN old lockfile
npm WARN old lockfile This is a one-time fix-up, please be patient...
npm WARN old lockfile
npm WARN deprecated ini@1.3.5: Please update to ini >=1.3.6 to avoid a prototype pollution issue
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated source-map-url@0.4.0: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated debug@4.1.1: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 
or 4.3.1. (https://github.com/visionmedia/debug/issues/797)
npm WARN deprecated debug@3.2.6: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 
or 4.3.1. (https://github.com/visionmedia/debug/issues/797)
npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated ecstatic@3.3.2: This package is unmaintained and deprecated. See the GH Issue 259.

added 754 packages, and audited 897 packages in 21s

28 packages are looking for funding
  run `npm fund` for details

22 vulnerabilities (6 moderate, 13 high, 3 critical)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.


on git master [!] is pkg v0.9.0 via nodejs took 21s 

npm audit fix --force, and:

npm WARN using --force Recommended protections disabled.
npm WARN audit fix lodash@4.17.19 node_modules/tap/node_modules/lodash
npm WARN audit fix lodash@4.17.19 is a bundled dependency of
npm WARN audit fix lodash@4.17.19 tap@14.10.8 at node_modules/tap
npm WARN audit fix lodash@4.17.19 It cannot be fixed automatically.
npm WARN audit fix lodash@4.17.19 Check for updates to the tap package.
npm WARN audit fix ansi-regex@4.1.0 node_modules/tap/node_modules/log-update/node_modules/ansi-regex
npm WARN audit fix ansi-regex@4.1.0 is a bundled dependency of
npm WARN audit fix ansi-regex@4.1.0 tap@14.10.8 at node_modules/tap
npm WARN audit fix ansi-regex@4.1.0 It cannot be fixed automatically.
npm WARN audit fix ansi-regex@4.1.0 Check for updates to the tap package.
npm WARN audit fix ansi-regex@4.1.0 node_modules/tap/node_modules/string-length/node_modules/ansi-regex
npm WARN audit fix ansi-regex@4.1.0 is a bundled dependency of
npm WARN audit fix ansi-regex@4.1.0 tap@14.10.8 at node_modules/tap
npm WARN audit fix ansi-regex@4.1.0 It cannot be fixed automatically.
npm WARN audit fix ansi-regex@4.1.0 Check for updates to the tap package.
npm WARN audit fix ansi-regex@5.0.0 node_modules/tap/node_modules/ansi-regex
npm WARN audit fix ansi-regex@5.0.0 is a bundled dependency of
npm WARN audit fix ansi-regex@5.0.0 tap@14.10.8 at node_modules/tap
npm WARN audit fix ansi-regex@5.0.0 It cannot be fixed automatically.
npm WARN audit fix ansi-regex@5.0.0 Check for updates to the tap package.
npm WARN audit fix minimist@1.2.5 node_modules/tap/node_modules/minimist
npm WARN audit fix minimist@1.2.5 is a bundled dependency of
npm WARN audit fix minimist@1.2.5 tap@14.10.8 at node_modules/tap
npm WARN audit fix minimist@1.2.5 It cannot be fixed automatically.
npm WARN audit fix minimist@1.2.5 Check for updates to the tap package.
npm WARN audit fix path-parse@1.0.6 node_modules/tap/node_modules/path-parse
npm WARN audit fix path-parse@1.0.6 is a bundled dependency of
npm WARN audit fix path-parse@1.0.6 tap@14.10.8 at node_modules/tap
npm WARN audit fix path-parse@1.0.6 It cannot be fixed automatically.
npm WARN audit fix path-parse@1.0.6 Check for updates to the tap package.
npm WARN audit Updating http-server to 14.1.1,which is a SemVer major change.
npm WARN audit Updating webpack to 5.74.0,which is a SemVer major change.
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: tikzcd-editor@0.9.0
npm WARN Found: webpack@4.44.2
npm WARN node_modules/webpack
npm WARN   peer webpack@">=2" from babel-loader@8.1.0
npm WARN   node_modules/babel-loader
npm WARN     dev babel-loader@"^8.1.0" from the root project
npm WARN   3 more (terser-webpack-plugin, webpack-cli, the root project)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer webpack@"4.x.x" from webpack-cli@3.3.12
npm WARN node_modules/webpack-cli
npm WARN   dev webpack-cli@"^3.3.12" from the root project

added 32 packages, removed 124 packages, changed 52 packages, and audited 805 packages in 6s

34 packages are looking for funding
  run `npm fund` for details

# npm audit report

ansi-regex  4.0.0 - 4.1.0 || 5.0.0
Severity: high
Inefficient Regular Expression Complexity in chalk/ansi-regex - https://github.com/advisories/GHSA-93q8-gq69-wqmw
Inefficient Regular Expression Complexity in chalk/ansi-regex - https://github.com/advisories/GHSA-93q8-gq69-wqmw
fix available via `npm audit fix`
node_modules/tap/node_modules/ansi-regex
node_modules/tap/node_modules/log-update/node_modules/ansi-regex
node_modules/tap/node_modules/string-length/node_modules/ansi-regex

lodash  <=4.17.20
Severity: high
Prototype Pollution in lodash - https://github.com/advisories/GHSA-p6mc-m468-83gw
Command Injection in lodash - https://github.com/advisories/GHSA-35jh-r3h4-6jhm
fix available via `npm audit fix`
node_modules/tap/node_modules/lodash

minimist  <1.2.6
Severity: critical
Prototype Pollution in minimist - https://github.com/advisories/GHSA-xvch-5gv4-984h
fix available via `npm audit fix`
node_modules/tap/node_modules/minimist

path-parse  <1.0.7
Severity: moderate
Regular Expression Denial of Service in path-parse - https://github.com/advisories/GHSA-hj48-42vr-x3v9
fix available via `npm audit fix`
node_modules/tap/node_modules/path-parse

4 vulnerabilities (1 moderate, 2 high, 1 critical)

To address all issues, run:
  npm audit fix

npm run build, and:

> tikzcd-editor@0.9.0 build
> npm run format-base -- --check && webpack --mode production


> tikzcd-editor@0.9.0 format-base
> prettier "**/*.{js,html,md}" "!{dist/**,bundle.js*}" "--check"

Checking formatting...
[warn] ci\createArtifact.js
[warn] ci\extractInfo.js
[warn] index.html
[warn] README.md
[warn] src\components\App.js
[warn] src\components\CodeBox.js
[warn] src\components\Grid.js
[warn] src\components\GridArrow.js
[warn] src\components\GridCell.js
[warn] src\components\Properties.js
[warn] src\components\Toolbox.js
[warn] src\diagram.js
[warn] src\geometry.js
[warn] src\helper.js
[warn] src\index.js
[warn] src\parser.js
[warn] tests\geometry.test.js
[warn] tests\parser.test.js
[warn] tests\tap-snapshots\parser.test.js-TAP.test.js
[warn] webpack.config.js
[warn] Code style issues found in the above file(s). Forgot to run Prettier?


on git master [!] is pkg v0.9.0 via nodejs took 2s 
tikzcd-editor λ npm install Prettier

changed 1 package, and audited 805 packages in 2s

35 packages are looking for funding
  run `npm fund` for details

4 vulnerabilities (1 moderate, 2 high, 1 critical)

To address all issues, run:
  npm audit fix

Run `npm audit` for details.

Here, it tell me to run Prettier, but I don't know its meaning clearly?
I know that have installed prettier.

on git master [!] is pkg v0.9.0 via nodejs took 2s 
tikzcd-editor λ Prettier -v
2.7.1


on git master [!] is pkg v0.9.0 via nodejs 
tikzcd-editor λ where Prettier
C:\Users\scillidan\scoop\apps\nodejs\current\bin\prettier
C:\Users\scillidan\scoop\apps\nodejs\current\bin\prettier.cmd

It would be very nice if the app allowed importing and exporting the diagrams as JSON, for ease of saving diagrams in progress.

can you make tikzcd editor support double arrows, such as

and a more complicated example

A diagram containing a single node [A] causes a tikzcd error when exported. It should be escaped as {[A]}. Perhaps it'd be easiest to ensure all nodes are wrapped with {}, or else work out which characters require escaping in this way.

It is inconvenient when I want to draw a second diagram while I had to clear all cells and arrows each

It's ruining my screenshots.

Great tool BTW.

Often when I have a square, the opposite sides of the square will be formatted as the same kind of arrow, for instance the pullback of an epi is epi.
It would be useful for that case then to only format one of the arrows and then copy and paste it on the other side of the square.

Also it would just make it easier to move stuff around. For that purpose you might want to have area selection too, but just single arrow copy/paste would be very useful.

It would be pretty cool with the ability to make arrows between arrows (for natural transformations, etc.)

Double-struck arrows too (which could double as equals-signs without an arrowhead.)

This project looks like something I desperately need in my life, but sadly it is impossible to use on a touchscreen. As I often try to solve tasks on the go, abandoning pen and paper for drawing diagrams in favor of an app on my phone would be wonderful!

It seems right now that the site living at tikzcd.yichuanshen.de is not up to date with the latest release in this repo.

Since this is a static site, it can be deployed on the repo's gh-pages branch, so it would be available at yishn.github.io/tikzcd-editor.

It's not exactly the most elegant thing in the world, but with the gh-pages package, this could be as easy as adding the following npm script:

"deploy": "mkdir -p deploy; cp index.html deploy; cp favicon.ico deploy; cp -r dist deploy; cp -r css deploy; cp -r img deploy; gh-pages -d deploy"

Which would instantly update your gh-pages branch with the latest version of the site. I'm doing this now on my fork just as an example - If you want to remain hosting it wherever you are now, I'm sure a similar process could be automated without much trouble.

Before making a PR or anything, I wanted to open an issue and see if you had any thoughts on this.

When copying the code of a diagram (opening it with the "{ }"-button) and pasting it into another instance of the application I sometimes get an error message "Could not parse code. Reason: Could not match edge label."
An example of such code is the following:

\begin{tikzcd}
A \arrow[d, "\overline{g}"'] &  & A\times B \arrow[rrdd, "g"] \arrow[rr, "\pi_2"] \arrow[ll, "\pi_1"'] \arrow[dd, "\overline{g}\times\mathbf{1}_B" description, dashed] &  & B \arrow[d, "\mathbf{1}_B"] \\
C^B                          &  &                                                                                                                                       &  & B                           \\
                             &  & C^B\times B \arrow[llu, "\pi'_1"] \arrow[rru, "\pi'_2"'] \arrow[rr, "{\mathrm{ev}_{B,C}}"']                                           &  & C                          
\end{tikzcd}

For example, with a library like https://github.com/polygonplanet/lzbase62 b64EncodeUnicode and b64DecodeUnicode can be defined just as

export const b64EncodeUnicode = lzbase62.compress
export const b64DecodeUnicode = lzbase62.decompress

making URLs a bit shorter (something like 300 characters instead of 500, if I look at one example).

An issue has been opened at preactjs/preact#2783.

Selecting a square (to enter text) does not deselect the previous arrow you selected and anything you type in the square is also interpreted as an action on the arrow.

For instance, to reproduce

1. Make an arrow.
2. Click in the middle of a square, and a flashing cursor should appear.
3. Enter "R". An "R" appears in the square, and the arrow reverses.
4. Press backspace. The "R" and the arrow disappear.

I'm getting this behavior in both chromium and the latest firefox, both in "Arrow tool" mode and "Pan tool" mode.

I just tried to create a diagram with "long equals signs" between nodes. To do this I used the double arrow and removed the head. However, the output code gives the \arrow options in the following order:

\arrow[dd, no head, Rightarrow]

The Right arrow overrides the no head. Changing the order to:

\arrow[dd, Rightarrow, no head]

solves the problem.

This is a feature request.

When chatting with people, or otherwise using diagrams outside of a TeX document, I like to jump into the tikzcd-editor, set up a diagram and then just take a screenshot. Before doing so, I open the CSS-editor in my browser and disable the dashed lines around the background squares, to get a white background, as if the diagram was taken right out of a TeX document. It would be nice if there was a button to instantly copy a perfect "screenshot" to the clipboard.

I am not sure how to implement this myself, but would like to help, if it seems easy and you can point me in the right direction.

Sometimes drag operations makes you select unnecessary things on editor. It can be prevent with user-select: none kind of style for better user experience. A picture is worth a thousand words;

Thanks for editor BTW :)

First of all, thanks for this really nice and helpful tool :-)

I have added some new features to my master branch at https://github.com/zickgraf/tikzcd-editor/commits/master and I think some of them might be interesting for all users. If you are interested in some of them, let me know and I will provide pull requests.

I will give short descriptions of the changes:

• zickgraf@d1d2448 This commit puts a textarea in the right half of the screen which immediately displays the code every time the diagram is changed. Additionally, if code is pasted in the textarea it gets parsed (with a very crude parser) and the diagram is shown/updated on the left.
• zickgraf@1557aac This commit installs a local copy of MathJax for offline use.
• zickgraf@8facd81 This commit pads the generated code such that all ampersands are aligned vertically.
• zickgraf@1bc3a48 This commit adds parsing of "near start", "near end", "very near start" and "very near end" to the textarea mentioned above.

Note that nothing of this is polished yet but of course I will polish it before providing pull requests.

I'm getting some invalid tikzcd code when I have diagrams with "empty" nodes.

For instance an arrow by itself produces the code

\begin{tikzcd}
 \arrow[r] & 
\end{tikzcd}

and I get an error like this:

! Package pgf Error: No shape named tikz@f@5-1-2 is known.
...
l.441 I think the culprit is a tikzcd arrow in cell 1-1.
\errmessage ...currentrow -\tikzcd@currentcolumn }
                                                  
l.442 \end{tikzcd}

To fix this you can put in a dummy there like {}:

\begin{tikzcd}
{} \arrow[r] & {}
\end{tikzcd}

Here's a bigger example that I was making where I put two diagrams side-by-side.
Here, the empty nodes aren't the source or target for anything, but they are still in the diagram.
I haven't looked at your representation, but I think the solution here would be to make sure that no nodes in the generated code are empty, where any cell within the bounding box of the whole diagram is going to be considered a node.

sometimes, when I draw a commutative graph, I need a long right arrow, but tikzcd editor does not support it, can you add this feature?
\Longrightarrow \Longleftrightarrow \longleftrightarrow \Uparrow \Downarrow \Updownarrow and is as below,

When I compile the latex produced by this tool locally or in overleaf I always get a ton of issues relating to the labels and then the produced diagram won't have any labels.

Now I know that the syntax you use (which is \arrow[r, "label"]) is supposed to work because the manual introduces it literally on page 2. However when I compile a document with this code:

\begin{tikzcd}
A \arrow[r, "\phi"] & B
\end{tikzcd}

which is practically straight from the documentation (but generated by the editor), then whether it's in overleaf or on a fresh latex install in a container on my machine the compiler won't recognize the label as such.

Because of this I always need to refactor the code generated by the tool to the form \arrow{r}{label}.

My suggestion is therefore to do one of three things:

1. There could be a toggle setting to allow the user to control which format the code should be exported to (which would be an enhancement).
2. You could explain what I'm doing wrong here so that others can find this issue and apply the same fix.
3. I'm not crazy and we should change the default to the "wrong" syntax.

Thanks for a wonderful tool, it has made drawing huge diagrams much less painful.

There is a problem where making a long (longer than a orthogonal or diagonal between two adjacent boxes) arrow with a label misplaces the label. The label is placed floating quite far from the arrow if on the outside, close to the arrow if one selects the label on the arrow, and directly between the source and destination cells if on the inside.

To replicate: create an arrow between two far-off cells, make it curve, apply a label, make label either be on left, on right or placed on the arrow.

Fantastic editor! I am using it more and more. The main thing I find missing is the little corner cubes in squares saying that they are a pushout or a pullback. In tikzcd, these are accomplished with "phantom arrows", with only the endpoint showing (and set to \ulcorner, or \drcorner respectively).

Cheers,

I notice that the version of the app deployed at https://tikzcd.yichuanshen.de/ still has the "blank page" issue (#48); but based on the related issues and behavior of the latest downloaded release, that has been solved without the performance impact.

Is there some reason the latest release is not deployed at that link?

This is awesome! I noticed that while everything seems to work great in Chrome, the arrow heads & tails aren't rendered in Safari (10.1).

It's not a big deal since it works fine in Chrome, so feel free to close if you're not interested in fixing.

Is there a way to stretch/shrink arrows after you've placed them?

For example, margin, circle, et.c.

Thank you for this wonderful tikzcd editor, saves a lot of working typing CAT lecture notes.

Is it possible to include identity arrows in the editor?
https://i.imgur.com/gA8YUr4.png

Regards,
SH

An option to toggle the grid would be very nice, so that one could quickly take a preview screenshot without having to compile the thing in LaTeX.

I currently have this workflow.

1. Develop diagram in tikzcd-editor.
2. Copy/paste generated LaTeX source into LaTeXIt.
3. Export rendering as SVG to my project's images/ directory.
4. Save tikzcd-editor generated URL as a browser bookmark (as the saved "file").

Cutting the LaTeXIt step out would be helpful. Also, if a webservice was accessible for sending LaTeX source and getting back an SVG (that would be huge). I would then, in my AsciidoctorJ build file, check to see if any of the URLs have changed, if so, grab the latest rendering. That would remove a lot of human clickity-typity on my side.

I appreciate your project. Thank you.

I know this sounds weird but...

Upon performing a hard reload of the site, one can click in any cell, and as soon as any key is pressed, the entire page goes white. The "reason" is clear: the inspector shows that div#root has display: none on it. Upon reloading the page, this doesn't happen anymore!

However, upon hard reloading the page, the issue happens again, and can only be fixed with a (regular) reload.

I've managed to produce this in Chrome and Firefox.

On Safari 12.1, one cannot input more than one character for each label, and text mouse-cursor doesn't appear at all.

How To Reproduce

1. Open the official demo page.
2. Double-click any empty node
3. Although text mouse-cursor or text cursor don't appear, one can input a single character.
4. Then, the focus seems disabled and any additional key event goes nowhere.
5. If one re-double click the same node, one can replace the label with another single character by pushing any single key, but cannot append/prepend characters to the existing label.

Environment

• Safari 12.1
• macOS Mojave 10.14.4

One often want arrows from an object to itself (achieved with the tikzcd loop parameter), but it's only possible to draw arrows between different grid cells at the moment.

The current syntax for tikzcd editor gives, when the user inputs a double arrow from (cell 1) that traverses two cells diagonally down and right from its origination point with no head

(cell 1) \arrow[rrdd, no head, Rightarrow] & ......

tikzcd's output still has a head at the bottom-right end of this arrow because Rightarrow, the later argument, has a head on it. This should be switched to

(cell 1) \arrow[rrdd, Rightarrow, no head] & ......

in order to remove the head from Rightarrow.

Thanks for your work.

When within one node, I'd suggest that pressing one of the arrow keys navigates the user to the desired node.

Maybe Ctrl-arrow key also adds an edge.

First thank you very much for this tool. It makes my life much easier.

I understand you don't want to support image export since it can be done from latex. Is it possible to add a button to hide the dashed lines?

Sometimes I just need to take a quick screenshot, it'll be perfect if those dashed grid lines can be hidden.

Is there any way that I can export the created diagrams in either a raster or vector format?

I did see the companion project that lets you render these in JSX, and I realize this could probably be done in a LaTeX editor with some extensions, but I was wondering if there was a more convenient way.

I wanted to do a diagram on LTI systems, and this tool was almost perfect but, how can I make it do squares like

(Or if this is the wrong tool, what tool should I use instead?)

can you add a new feature that making tikzcd editor export png and pdf file?

When labeling a vertical arrow the text distances itself from the arrow it is attached to.
This issue is relatively new.

In the beamer class, one needs [ampersand replacement=\&] to make it work. source

It would be nice if there was an option to do this, or if it was the default. I'm not sure if there is a situation in which this behaviour isn't desirable

I'd be willing to implement this if you could point out the relevant parts of the code.

In the following diagram, it is not possible to drag Y on to the end of the arrow, despite it being empty.

In such a situation, it makes sense to allow Y to be dragged on top of the empty node.

When I draw a double line without arrow head, it produces \arrow[r, no head, Rightarrow] but compiling it with latex, I get a double line with head. It looks like the correct option is equal instead of no head, Rightarrow.