xypic

v4.0.0

Published

23 days ago

XyJax for MathJax 4 - Xy-pic diagram extension

Downloads

156

0High
0Medium
0Low

taniguchi

mathjax mathjax4 xypic diagram commutative mathematics

XyJax v4

-- Xy-pic extension for MathJax 4 --

XyJax is an almost Xy-pic compatible extension for MathJax 4.

This extension enables you to draw various graphs and diagrams.

See https://github.com/tani/mathjax-xypic for more details.

Origins:

MathJax: https://www.mathjax.org/
Xy-pic: https://www.tug.org/applications/Xy-pic/

Acknowledgments: This project is a fork and continuation of XyJax-v3 originally created and maintained by Isao Sonobe. The original work provided the foundation for this MathJax 4 adaptation.

This software is under development.

Installation instructions

Using XyJax v4 from a CDN

(ref. test/sample-xyjax-v3-CDN.html)

In your html, configure it to load the xypic.js.

<script>
  MathJax = {
    loader: {
      load: ['[custom]/xypic.js'],
      paths: {custom: 'https://cdn.jsdelivr.net/gh/tani/[email protected]/build/'}
    },
    tex: {
      packages: {'[+]': ['xypic']}
    }
  };
</script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@4/es5/tex-chtml.js"></script>
<!-- <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@4/es5/tex-svg.js"></script> -->

Hosting your own copy of XyJax

(ref. test/sample-xyjax-v3-chtml.html and test/sample-xyjax-v3-svg.html)

Download build/xypic.js. The rest of the files are not necessary for use.
In your html, configure it to load the xypic.js you downloaded.

<script>
  MathJax = {
    loader: {
      load: ['[custom]/xypic.js'],
      paths: {custom: '.'}  // specify the path where xypic.js is located. 
                            // This example assumes that xypic.js is in the same place as html.
    },
    tex: {
      packages: {'[+]': ['xypic']}
    }
  };
</script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@4/es5/tex-chtml.js"></script>
<!-- <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@4/es5/tex-svg.js"></script> -->

Quick Start - Simple Examples

Browser (HTML)

Create an HTML file with XyPic diagrams:

<!DOCTYPE html>
<html>
<head>
  <script>
    MathJax = {
      loader: {
        load: ['[custom]/xypic.js'],
        paths: {custom: 'https://cdn.jsdelivr.net/gh/tani/[email protected]/build/'}
      },
      tex: {
        packages: {'[+]': ['xypic']}
      }
    };
  </script>
  <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@4/es5/tex-chtml.js"></script>
</head>
<body>

<h1>XyPic Diagrams</h1>

<!-- Simple arrow -->
<p>$$\begin{xy} (0,0) \ar[r] & (10,0) \end{xy}$$</p>

<!-- Commutative diagram -->
<p>$$\begin{xy}
  (0,10) \ar[r]^f \ar[d]_g & (10,10) \ar[d]^h \\
  (0,0) \ar[r]_k & (10,0)
\end{xy}$$</p>

<!-- Curved arrows -->
<p>$$\begin{xy}
  (0,0) \ar@/_/[r] & (10,0) \ar@/^/[l]
\end{xy}$$</p>

</body>
</html>

Node.js

Use XyJax programmatically in Node.js:

npm install mathjax@4 xypic

import { mathjax } from 'mathjax-full/js/mathjax.js';
import { TeX } from 'mathjax-full/js/input/tex.js';
import { SVG } from 'mathjax-full/js/output/svg.js';
import { RegisterHTMLHandler } from 'mathjax-full/js/handlers/html.js';
import { AssertionError } from 'mathjax-full/js/util/error.js';

// Load xypic (auto-registers with MathJax)
import 'xypic';

// Setup MathJax
RegisterHTMLHandler(new AssertionError());
const tex = new TeX({ packages: ['base', 'xypic'] });
const svg = new SVG();
const doc = mathjax.document('', { InputJax: tex, OutputJax: svg });

// Render diagram
const diagram = String.raw`\begin{xy}
  (0,0) \ar[r]^f & (10,0)
\end{xy}`;

const result = doc.convert(diagram, { display: true });
console.log(result);

Common XyPic Commands

| Command | Purpose | |---------|---------| | (x,y) | Position object at coordinates | | \ar[r] | Arrow pointing right | | \ar[d] | Arrow pointing down | | ^label | Label above arrow | | _label | Label below arrow | | \ar@/_/ | Curved arrow (under) | | \ar@/^/ | Curved arrow (over) |

Example Diagrams

Function composition:

$$\begin{xy}
  X \ar[r]^f & Y \ar[r]^g & Z
\end{xy}$$

Pullback diagram:

$$\begin{xy}
  A \ar[r] \ar[d] & B \ar[d]^p \\
  C \ar[r]_q & D
\end{xy}$$

Loop with curves:

$$\begin{xy}
  (0,0) \ar@/^/[r] & (10,0) \ar@/_/[l]
\end{xy}$$

Supported MathJax Functions

Supported MathJax version:
- 4.0.0+
Supported Renderers:
- CHTML
- SVG
Accessibility does not work.

For Developers

How to build xypic.js for production

$ git clone https://github.com/tani/mathjax-xypic.git mathjax-xypic
$ cd mathjax-xypic
$ npm install
$ npm run clean
$ npm run build

How to run tests

$ npm test

Build system

XyJax v4 uses rolldown as the bundler (a Rust-based JavaScript bundler compatible with Rollup). The build process:

Compiles TypeScript sources to JavaScript
Bundles with rolldown using a custom plugin for MathJax library resolution
Minifies output using built-in SWC minifier
Produces a single IIFE bundle (build/xypic.js)

For development with source maps or debugging, modify components/xypic/rolldown.config.js.