Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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 days ago
JSON representation

Render tikzcd diagrams with JSX.

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) return



        let [x, y] = this.props.position || [0, 0]

        let [dx, dy] = this.props.direction || [1, 0]

        let [a, b, ] = this.props.children



        return 

            

            



            

        

    }

}



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) return



    let [x, y] = props.position || [0, 0]

    let [dx, dy] = props.direction || [1, 0]

    let [a, b, ] = props.children



    return 

        

        



        

    

}

~~~



### 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 options



These 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.