Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yishn/jsx-tikzcd
Render tikzcd diagrams with JSX.
https://github.com/yishn/jsx-tikzcd
category-theory diagram jsx latex tikz tikzcd
Last synced: 2 months ago
JSON representation
Render tikzcd diagrams with JSX.
- Host: GitHub
- URL: https://github.com/yishn/jsx-tikzcd
- Owner: yishn
- License: mit
- Created: 2017-08-10T15:46:25.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2020-01-25T13:37:27.000Z (almost 5 years ago)
- Last Synced: 2024-09-29T05:03:42.701Z (3 months ago)
- Topics: category-theory, diagram, jsx, latex, tikz, tikzcd
- Language: JavaScript
- Homepage:
- Size: 150 KB
- Stars: 59
- Watchers: 3
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# jsx-tikzcd [![Build Status](https://travis-ci.org/yishn/jsx-tikzcd.svg?branch=master)](https://travis-ci.org/yishn/jsx-tikzcd)
Render `tikzcd` diagrams with JSX.
## Table of Contents
- [Introduction](#introduction)
- [Getting Started](#getting-started)
- [Installation](#installation)
- [Set Up](#set-up)
- [Render](#render)
- [Components](#components)
- [Gluing](#gluing)
- [Duality](#duality)
- [Documentation](#documentation)## Introduction
`tikzcd` is a powerful LaTeX package that can draw beautiful diagrams used in mathematics, especially category theory. However, its syntax is primarily based on the appearance, not the semantics, which makes it difficult to, say, change the position of a single node without having to redefine the edges.
`jsx-tikzcd` can turn a simple, semantic JSX tree consisting of nodes and edges into `tikzcd` code. The following JSX
~~~js
// JSX code
~~~
yields
~~~latex
% LaTeX code\begin{tikzcd}
X\times_Z Y \arrow[r, "p_1"] \arrow[d, "p_2"'] & X \arrow[d] \\
Y \arrow[r] & Z
\end{tikzcd}
~~~which renders into
![Demo](./demo.png)
## Getting Started
### Installation
You can install jsx-tikzcd using npm:
~~~
npm install jsx-tikzcd
~~~### Set Up
Make sure you have JSX set up correctly in Babel:
~~~js
{
"plugins": [
["transform-react-jsx", {"pragma": "h"}]
]
}
~~~### Render
Then you can render TikZ diagrams like this:
~~~js
import {h, render, Diagram, Node, Edge} from 'jsx-tikzcd'let tex = render(
)
~~~### Components
You can define your own components and use them to make higher-order components just like in React.
~~~js
import {h, render, Component, Diagram, Node, Edge} from 'jsx-tikzcd'class Arrow extends Component {
render() {
if (this.props.children.length < 2) returnlet [x, y] = this.props.position || [0, 0]
let [dx, dy] = this.props.direction || [1, 0]
let [a, b, ] = this.props.childrenreturn
}
}let tex = render(
)
~~~jsx-tikzcd doesn't support state and tracking state changes, so every component is a pure component and can be written as a function as well:
~~~js
const Arrow = function(props) {
if (props.children.length < 2) returnlet [x, y] = props.position || [0, 0]
let [dx, dy] = props.direction || [1, 0]
let [a, b, ] = props.childrenreturn
}
~~~### Gluing
Nodes with the same key will be merged and collapsed into one single node. This is useful to glue multiple sub components together.
~~~js
let tex = render(
{/* Gluing at y */}
)// \begin{tikzcd}
// X \arrow[r] & Y \arrow[r] & Z
// \end{tikzcd}
~~~If there are conflicting attributes, the one that was defined last is used, i.e. attributes that come after will overwrite attributes that came before. Keep in mind that edges are not glued; you can define multiple edges between two nodes.
### Duality
In category theory, there's this concept of an opposite category, in which every arrow of a diagram is reversed. It's possible to automate this process in jsx-tikzcd by adding the attribute `co` to a Diagram:
~~~js
let tex = render(
)// \begin{tikzcd}
// X & Y \arrow[l] & Z \arrow[l]
// \end{tikzcd}
~~~Alternatively, you can use the `corender` function of jsx-tikzcd:
~~~js
import {h, corender, Diagram, Node, Edge} from 'jsx-tikzcd'let tex = corender(
)
~~~## Documentation
### `render` and `corender`
#### Arguments
* `vnode` [``](#diagram) - The diagram to render
* `options` `` *(optional)*
* `align` `` - Determines whether the generated code will vertically align at `&`. Default: `false`Returns a string which contains the corresponding LaTeX code to the given diagram.
### ``
#### Props
* `co` `` *(optional)* - Determines whether to reverse all edges
* `options` `` *(optional)* - `tikzcd` environment optionsThese attributes only work in the root node, i.e. the node that's passed to `render` or `corender`.
### ``
#### Props
* `key` ``
* `position` `` - Has the form `[x, y]`, negative integers are also allowed
* `value` `` *(optional)* - LaTeX label### ``
#### Props
* `from` `` - Key of the start node
* `to` `` - Key of the end node
* `value` `` *(optional)* - LaTeX label
* `labelPosition` `` *(optional)* - One of `"left"`, `"right"`, and `"inside"`
* `alt` `` *(optional)* - Determines whether the label is positioned on the other side of the arrow
* `args` `` *(optional)* - Additional tikzcd arguments of edge, e.g. `"hook"`, `"two heads"`, etc.## Related
* [tikzcd-editor](https://github.com/yishn/tikzcd-editor) - A simple visual editor for creating commutative diagrams.