savetest
XyJax  = Xy-pic extension for MathJax
XyJax  = Xy-pic extension for MathJax
XyJax
isao, 14 June 2015 (created 6 August 2011)
  • not tagging
  • no tags

About XyJax

XyJax is an almost Xy-pic compatible extension for MathJax.
This extension enables you to draw various graphs and diagrams.


This diagram was drawn by the code:
\begin{xy}
\xymatrix {
U \ar@/_/[ddr]_y \ar@{.>}[dr]|{\langle x,y \rangle} \ar@/^/[drr]^x \\
 & X \times_Z Y \ar[d]^q \ar[r]_p & X \ar[d]_f \\
 & Y \ar[r]^g & Z
}
\end{xy}

Limitation

  • Supported Browsers: Firefox, Safari, Chrome, Opera, Internet Explorer 9 (IE9 Standards Mode only)
  • Supported Math Renderer: HTML-CSS, SVG (MathJax 2.1 or later required)
  • This software is under development.

Current Implementation Status

<!--{{{-->
<link rel='alternate' type='application/rss+xml' title='RSS' href='index.xml' />
<!--}}}-->
Background: #fff
Foreground: #000
PrimaryPale: #8cf
PrimaryLight: #18f
PrimaryMid: #04b
PrimaryDark: #014
SecondaryPale: #ffc
SecondaryLight: #fe8
SecondaryMid: #db4
SecondaryDark: #841
TertiaryPale: #eee
TertiaryLight: #ccc
TertiaryMid: #999
TertiaryDark: #666
Error: #f88
/*{{{*/
body {background:[[ColorPalette::Background]]; color:[[ColorPalette::Foreground]];}

a {color:[[ColorPalette::PrimaryMid]];}
a:hover {background-color:[[ColorPalette::PrimaryMid]]; color:[[ColorPalette::Background]];}
a img {border:0;}

h1,h2,h3,h4,h5,h6 {color:[[ColorPalette::SecondaryDark]]; background:transparent;}
h1 {border-bottom:2px solid [[ColorPalette::TertiaryLight]];}
h2,h3 {border-bottom:1px solid [[ColorPalette::TertiaryLight]];}

.button {color:[[ColorPalette::PrimaryDark]]; border:1px solid [[ColorPalette::Background]];}
.button:hover {color:[[ColorPalette::PrimaryDark]]; background:[[ColorPalette::SecondaryLight]]; border-color:[[ColorPalette::SecondaryMid]];}
.button:active {color:[[ColorPalette::Background]]; background:[[ColorPalette::SecondaryMid]]; border:1px solid [[ColorPalette::SecondaryDark]];}

.header {background:[[ColorPalette::PrimaryMid]];}
.headerShadow {color:[[ColorPalette::Foreground]];}
.headerShadow a {font-weight:normal; color:[[ColorPalette::Foreground]];}
.headerForeground {color:[[ColorPalette::Background]];}
.headerForeground a {font-weight:normal; color:[[ColorPalette::PrimaryPale]];}

.tabSelected{color:[[ColorPalette::PrimaryDark]];
	background:[[ColorPalette::TertiaryPale]];
	border-left:1px solid [[ColorPalette::TertiaryLight]];
	border-top:1px solid [[ColorPalette::TertiaryLight]];
	border-right:1px solid [[ColorPalette::TertiaryLight]];
}
.tabUnselected {color:[[ColorPalette::Background]]; background:[[ColorPalette::TertiaryMid]];}
.tabContents {color:[[ColorPalette::PrimaryDark]]; background:[[ColorPalette::TertiaryPale]]; border:1px solid [[ColorPalette::TertiaryLight]];}
.tabContents .button {border:0;}

#sidebar {}
#sidebarOptions input {border:1px solid [[ColorPalette::PrimaryMid]];}
#sidebarOptions .sliderPanel {background:[[ColorPalette::PrimaryPale]];}
#sidebarOptions .sliderPanel a {border:none;color:[[ColorPalette::PrimaryMid]];}
#sidebarOptions .sliderPanel a:hover {color:[[ColorPalette::Background]]; background:[[ColorPalette::PrimaryMid]];}
#sidebarOptions .sliderPanel a:active {color:[[ColorPalette::PrimaryMid]]; background:[[ColorPalette::Background]];}

.wizard {background:[[ColorPalette::PrimaryPale]]; border:1px solid [[ColorPalette::PrimaryMid]];}
.wizard h1 {color:[[ColorPalette::PrimaryDark]]; border:none;}
.wizard h2 {color:[[ColorPalette::Foreground]]; border:none;}
.wizardStep {background:[[ColorPalette::Background]]; color:[[ColorPalette::Foreground]];
	border:1px solid [[ColorPalette::PrimaryMid]];}
.wizardStep.wizardStepDone {background:[[ColorPalette::TertiaryLight]];}
.wizardFooter {background:[[ColorPalette::PrimaryPale]];}
.wizardFooter .status {background:[[ColorPalette::PrimaryDark]]; color:[[ColorPalette::Background]];}
.wizard .button {color:[[ColorPalette::Foreground]]; background:[[ColorPalette::SecondaryLight]]; border: 1px solid;
	border-color:[[ColorPalette::SecondaryPale]] [[ColorPalette::SecondaryDark]] [[ColorPalette::SecondaryDark]] [[ColorPalette::SecondaryPale]];}
.wizard .button:hover {color:[[ColorPalette::Foreground]]; background:[[ColorPalette::Background]];}
.wizard .button:active {color:[[ColorPalette::Background]]; background:[[ColorPalette::Foreground]]; border: 1px solid;
	border-color:[[ColorPalette::PrimaryDark]] [[ColorPalette::PrimaryPale]] [[ColorPalette::PrimaryPale]] [[ColorPalette::PrimaryDark]];}

.wizard .notChanged {background:transparent;}
.wizard .changedLocally {background:#80ff80;}
.wizard .changedServer {background:#8080ff;}
.wizard .changedBoth {background:#ff8080;}
.wizard .notFound {background:#ffff80;}
.wizard .putToServer {background:#ff80ff;}
.wizard .gotFromServer {background:#80ffff;}

#messageArea {border:1px solid [[ColorPalette::SecondaryMid]]; background:[[ColorPalette::SecondaryLight]]; color:[[ColorPalette::Foreground]];}
#messageArea .button {color:[[ColorPalette::PrimaryMid]]; background:[[ColorPalette::SecondaryPale]]; border:none;}

.popupTiddler {background:[[ColorPalette::TertiaryPale]]; border:2px solid [[ColorPalette::TertiaryMid]];}

.popup {background:[[ColorPalette::TertiaryPale]]; color:[[ColorPalette::TertiaryDark]]; border-left:1px solid [[ColorPalette::TertiaryMid]]; border-top:1px solid [[ColorPalette::TertiaryMid]]; border-right:2px solid [[ColorPalette::TertiaryDark]]; border-bottom:2px solid [[ColorPalette::TertiaryDark]];}
.popup hr {color:[[ColorPalette::PrimaryDark]]; background:[[ColorPalette::PrimaryDark]]; border-bottom:1px;}
.popup li.disabled {color:[[ColorPalette::TertiaryMid]];}
.popup li a, .popup li a:visited {color:[[ColorPalette::Foreground]]; border: none;}
.popup li a:hover {background:[[ColorPalette::SecondaryLight]]; color:[[ColorPalette::Foreground]]; border: none;}
.popup li a:active {background:[[ColorPalette::SecondaryPale]]; color:[[ColorPalette::Foreground]]; border: none;}
.popupHighlight {background:[[ColorPalette::Background]]; color:[[ColorPalette::Foreground]];}
.listBreak div {border-bottom:1px solid [[ColorPalette::TertiaryDark]];}

.tiddler .defaultCommand {font-weight:bold;}

.shadow .title {color:[[ColorPalette::TertiaryDark]];}

.title {color:[[ColorPalette::SecondaryDark]];}
.subtitle {color:[[ColorPalette::TertiaryDark]];}

.toolbar {color:[[ColorPalette::PrimaryMid]];}
.toolbar a {color:[[ColorPalette::TertiaryLight]];}
.selected .toolbar a {color:[[ColorPalette::TertiaryMid]];}
.selected .toolbar a:hover {color:[[ColorPalette::Foreground]];}

.tagging, .tagged {border:1px solid [[ColorPalette::TertiaryPale]]; background-color:[[ColorPalette::TertiaryPale]];}
.selected .tagging, .selected .tagged {background-color:[[ColorPalette::TertiaryLight]]; border:1px solid [[ColorPalette::TertiaryMid]];}
.tagging .listTitle, .tagged .listTitle {color:[[ColorPalette::PrimaryDark]];}
.tagging .button, .tagged .button {border:none;}

.footer {color:[[ColorPalette::TertiaryLight]];}
.selected .footer {color:[[ColorPalette::TertiaryMid]];}

.sparkline {background:[[ColorPalette::PrimaryPale]]; border:0;}
.sparktick {background:[[ColorPalette::PrimaryDark]];}

.error, .errorButton {color:[[ColorPalette::Foreground]]; background:[[ColorPalette::Error]];}
.warning {color:[[ColorPalette::Foreground]]; background:[[ColorPalette::SecondaryPale]];}
.lowlight {background:[[ColorPalette::TertiaryLight]];}

.zoomer {background:none; color:[[ColorPalette::TertiaryMid]]; border:3px solid [[ColorPalette::TertiaryMid]];}

.imageLink, #displayArea .imageLink {background:transparent;}

.annotation {background:[[ColorPalette::SecondaryLight]]; color:[[ColorPalette::Foreground]]; border:2px solid [[ColorPalette::SecondaryMid]];}

.viewer .listTitle {list-style-type:none; margin-left:-2em;}
.viewer .button {border:1px solid [[ColorPalette::SecondaryMid]];}
.viewer blockquote {border-left:3px solid [[ColorPalette::TertiaryDark]];}

.viewer table, table.twtable {border:2px solid [[ColorPalette::TertiaryDark]];}
.viewer th, .viewer thead td, .twtable th, .twtable thead td {background:[[ColorPalette::SecondaryMid]]; border:1px solid [[ColorPalette::TertiaryDark]]; color:[[ColorPalette::Background]];}
.viewer td, .viewer tr, .twtable td, .twtable tr {border:1px solid [[ColorPalette::TertiaryDark]];}

.viewer pre {border:1px solid [[ColorPalette::SecondaryLight]]; background:[[ColorPalette::SecondaryPale]];}
.viewer code {color:[[ColorPalette::SecondaryDark]];}
.viewer hr {border:0; border-top:dashed 1px [[ColorPalette::TertiaryDark]]; color:[[ColorPalette::TertiaryDark]];}

.highlight, .marked {background:[[ColorPalette::SecondaryLight]];}

.editor input {border:1px solid [[ColorPalette::PrimaryMid]];}
.editor textarea {border:1px solid [[ColorPalette::PrimaryMid]]; width:100%;}
.editorFooter {color:[[ColorPalette::TertiaryMid]];}
.readOnly {background:[[ColorPalette::TertiaryPale]];}

#backstageArea {background:[[ColorPalette::Foreground]]; color:[[ColorPalette::TertiaryMid]];}
#backstageArea a {background:[[ColorPalette::Foreground]]; color:[[ColorPalette::Background]]; border:none;}
#backstageArea a:hover {background:[[ColorPalette::SecondaryLight]]; color:[[ColorPalette::Foreground]]; }
#backstageArea a.backstageSelTab {background:[[ColorPalette::Background]]; color:[[ColorPalette::Foreground]];}
#backstageButton a {background:none; color:[[ColorPalette::Background]]; border:none;}
#backstageButton a:hover {background:[[ColorPalette::Foreground]]; color:[[ColorPalette::Background]]; border:none;}
#backstagePanel {background:[[ColorPalette::Background]]; border-color: [[ColorPalette::Background]] [[ColorPalette::TertiaryDark]] [[ColorPalette::TertiaryDark]] [[ColorPalette::TertiaryDark]];}
.backstagePanelFooter .button {border:none; color:[[ColorPalette::Background]];}
.backstagePanelFooter .button:hover {color:[[ColorPalette::Foreground]];}
#backstageCloak {background:[[ColorPalette::Foreground]]; opacity:0.6; filter:'alpha(opacity=60)';}
/*}}}*/
/*{{{*/
* html .tiddler {height:1%;}

body {font-size:.75em; font-family:arial,helvetica; margin:0; padding:0;}

h1,h2,h3,h4,h5,h6 {font-weight:bold; text-decoration:none;}
h1,h2,h3 {padding-bottom:1px; margin-top:1.2em;margin-bottom:0.3em;}
h4,h5,h6 {margin-top:1em;}
h1 {font-size:1.35em;}
h2 {font-size:1.25em;}
h3 {font-size:1.1em;}
h4 {font-size:1em;}
h5 {font-size:.9em;}

hr {height:1px;}

a {text-decoration:none;}

dt {font-weight:bold;}

ol {list-style-type:decimal;}
ol ol {list-style-type:lower-alpha;}
ol ol ol {list-style-type:lower-roman;}
ol ol ol ol {list-style-type:decimal;}
ol ol ol ol ol {list-style-type:lower-alpha;}
ol ol ol ol ol ol {list-style-type:lower-roman;}
ol ol ol ol ol ol ol {list-style-type:decimal;}

.txtOptionInput {width:11em;}

#contentWrapper .chkOptionInput {border:0;}

.externalLink {text-decoration:underline;}

.indent {margin-left:3em;}
.outdent {margin-left:3em; text-indent:-3em;}
code.escaped {white-space:nowrap;}

.tiddlyLinkExisting {font-weight:bold;}
.tiddlyLinkNonExisting {font-style:italic;}

/* the 'a' is required for IE, otherwise it renders the whole tiddler in bold */
a.tiddlyLinkNonExisting.shadow {font-weight:bold;}

#mainMenu .tiddlyLinkExisting,
	#mainMenu .tiddlyLinkNonExisting,
	#sidebarTabs .tiddlyLinkNonExisting {font-weight:normal; font-style:normal;}
#sidebarTabs .tiddlyLinkExisting {font-weight:bold; font-style:normal;}

.header {position:relative;}
.header a:hover {background:transparent;}
.headerShadow {position:relative; padding:4.5em 0 1em 1em; left:-1px; top:-1px;}
.headerForeground {position:absolute; padding:4.5em 0 1em 1em; left:0px; top:0px;}

.siteTitle {font-size:3em;}
.siteSubtitle {font-size:1.2em;}

#mainMenu {position:absolute; left:0; width:10em; text-align:right; line-height:1.6em; padding:1.5em 0.5em 0.5em 0.5em; font-size:1.1em;}

#sidebar {position:absolute; right:3px; width:16em; font-size:.9em;}
#sidebarOptions {padding-top:0.3em;}
#sidebarOptions a {margin:0 0.2em; padding:0.2em 0.3em; display:block;}
#sidebarOptions input {margin:0.4em 0.5em;}
#sidebarOptions .sliderPanel {margin-left:1em; padding:0.5em; font-size:.85em;}
#sidebarOptions .sliderPanel a {font-weight:bold; display:inline; padding:0;}
#sidebarOptions .sliderPanel input {margin:0 0 0.3em 0;}
#sidebarTabs .tabContents {width:15em; overflow:hidden;}

.wizard {padding:0.1em 1em 0 2em;}
.wizard h1 {font-size:2em; font-weight:bold; background:none; padding:0; margin:0.4em 0 0.2em;}
.wizard h2 {font-size:1.2em; font-weight:bold; background:none; padding:0; margin:0.4em 0 0.2em;}
.wizardStep {padding:1em 1em 1em 1em;}
.wizard .button {margin:0.5em 0 0; font-size:1.2em;}
.wizardFooter {padding:0.8em 0.4em 0.8em 0;}
.wizardFooter .status {padding:0 0.4em; margin-left:1em;}
.wizard .button {padding:0.1em 0.2em;}

#messageArea {position:fixed; top:2em; right:0; margin:0.5em; padding:0.5em; z-index:2000; _position:absolute;}
.messageToolbar {display:block; text-align:right; padding:0.2em;}
#messageArea a {text-decoration:underline;}

.tiddlerPopupButton {padding:0.2em;}
.popupTiddler {position: absolute; z-index:300; padding:1em; margin:0;}

.popup {position:absolute; z-index:300; font-size:.9em; padding:0; list-style:none; margin:0;}
.popup .popupMessage {padding:0.4em;}
.popup hr {display:block; height:1px; width:auto; padding:0; margin:0.2em 0;}
.popup li.disabled {padding:0.4em;}
.popup li a {display:block; padding:0.4em; font-weight:normal; cursor:pointer;}
.listBreak {font-size:1px; line-height:1px;}
.listBreak div {margin:2px 0;}

.tabset {padding:1em 0 0 0.5em;}
.tab {margin:0 0 0 0.25em; padding:2px;}
.tabContents {padding:0.5em;}
.tabContents ul, .tabContents ol {margin:0; padding:0;}
.txtMainTab .tabContents li {list-style:none;}
.tabContents li.listLink { margin-left:.75em;}

#contentWrapper {display:block;}
#splashScreen {display:none;}

#displayArea {margin:1em 17em 0 14em;}

.toolbar {text-align:right; font-size:.9em;}

.tiddler {padding:1em 1em 0;}

.missing .viewer,.missing .title {font-style:italic;}

.title {font-size:1.6em; font-weight:bold;}

.missing .subtitle {display:none;}
.subtitle {font-size:1.1em;}

.tiddler .button {padding:0.2em 0.4em;}

.tagging {margin:0.5em 0.5em 0.5em 0; float:left; display:none;}
.isTag .tagging {display:block;}
.tagged {margin:0.5em; float:right;}
.tagging, .tagged {font-size:0.9em; padding:0.25em;}
.tagging ul, .tagged ul {list-style:none; margin:0.25em; padding:0;}
.tagClear {clear:both;}

.footer {font-size:.9em;}
.footer li {display:inline;}

.annotation {padding:0.5em; margin:0.5em;}

* html .viewer pre {width:99%; padding:0 0 1em 0;}
.viewer {line-height:1.4em; padding-top:0.5em;}
.viewer .button {margin:0 0.25em; padding:0 0.25em;}
.viewer blockquote {line-height:1.5em; padding-left:0.8em;margin-left:2.5em;}
.viewer ul, .viewer ol {margin-left:0.5em; padding-left:1.5em;}

.viewer table, table.twtable {border-collapse:collapse; margin:0.8em 1.0em;}
.viewer th, .viewer td, .viewer tr,.viewer caption,.twtable th, .twtable td, .twtable tr,.twtable caption {padding:3px;}
table.listView {font-size:0.85em; margin:0.8em 1.0em;}
table.listView th, table.listView td, table.listView tr {padding:0px 3px 0px 3px;}

.viewer pre {padding:0.5em; margin-left:0.5em; font-size:1.2em; line-height:1.4em; overflow:auto;}
.viewer code {font-size:1.2em; line-height:1.4em;}

.editor {font-size:1.1em;}
.editor input, .editor textarea {display:block; width:100%; font:inherit;}
.editorFooter {padding:0.25em 0; font-size:.9em;}
.editorFooter .button {padding-top:0px; padding-bottom:0px;}

.fieldsetFix {border:0; padding:0; margin:1px 0px;}

.sparkline {line-height:1em;}
.sparktick {outline:0;}

.zoomer {font-size:1.1em; position:absolute; overflow:hidden;}
.zoomer div {padding:1em;}

* html #backstage {width:99%;}
* html #backstageArea {width:99%;}
#backstageArea {display:none; position:relative; overflow: hidden; z-index:150; padding:0.3em 0.5em;}
#backstageToolbar {position:relative;}
#backstageArea a {font-weight:bold; margin-left:0.5em; padding:0.3em 0.5em;}
#backstageButton {display:none; position:absolute; z-index:175; top:0; right:0;}
#backstageButton a {padding:0.1em 0.4em; margin:0.1em;}
#backstage {position:relative; width:100%; z-index:50;}
#backstagePanel {display:none; z-index:100; position:absolute; width:90%; margin-left:3em; padding:1em;}
.backstagePanelFooter {padding-top:0.2em; float:right;}
.backstagePanelFooter a {padding:0.2em 0.4em;}
#backstageCloak {display:none; z-index:20; position:absolute; width:100%; height:100px;}

.whenBackstage {display:none;}
.backstageVisible .whenBackstage {display:block;}
/*}}}*/
/***
StyleSheet for use when a translation requires any css style changes.
This StyleSheet can be used directly by languages such as Chinese, Japanese and Korean which need larger font sizes.
***/
/*{{{*/
body {font-size:0.8em;}
#sidebarOptions {font-size:1.05em;}
#sidebarOptions a {font-style:normal;}
#sidebarOptions .sliderPanel {font-size:0.95em;}
.subtitle {font-size:0.8em;}
.viewer table.listView {font-size:0.95em;}
/*}}}*/
/*{{{*/
@media print {
#mainMenu, #sidebar, #messageArea, .toolbar, #backstageButton, #backstageArea {display: none !important;}
#displayArea {margin: 1em 1em 0em;}
noscript {display:none;} /* Fixes a feature in Firefox 1.5.0.2 where print preview displays the noscript content */
}
/*}}}*/
<!--{{{-->
<div class='header' macro='gradient vert [[ColorPalette::PrimaryLight]] [[ColorPalette::PrimaryMid]]'>
<div class='headerShadow'>
<span class='siteTitle' refresh='content' tiddler='SiteTitle'></span>&nbsp;
<span class='siteSubtitle' refresh='content' tiddler='SiteSubtitle'></span>
</div>
<div class='headerForeground'>
<span class='siteTitle' refresh='content' tiddler='SiteTitle'></span>&nbsp;
<span class='siteSubtitle' refresh='content' tiddler='SiteSubtitle'></span>
</div>
</div>
<div id='mainMenu' refresh='content' tiddler='MainMenu'></div>
<div id='sidebar'>
<div id='sidebarOptions' refresh='content' tiddler='SideBarOptions'></div>
<div id='sidebarTabs' refresh='content' force='true' tiddler='SideBarTabs'></div>
</div>
<div id='displayArea'>
<div id='messageArea'></div>
<div id='tiddlerDisplay'></div>
</div>
<!--}}}-->
<!--{{{-->
<div class='toolbar' macro='toolbar [[ToolbarCommands::ViewToolbar]]'></div>
<div class='title' macro='view title'></div>
<div class='subtitle'><span macro='view modifier link'></span>, <span macro='view modified date'></span> (<span macro='message views.wikified.createdPrompt'></span> <span macro='view created date'></span>)</div>
<div class='tagging' macro='tagging'></div>
<div class='tagged' macro='tags'></div>
<div class='viewer' macro='view text wikified'></div>
<div class='tagClear'></div>
<!--}}}-->
<!--{{{-->
<div class='toolbar' macro='toolbar [[ToolbarCommands::EditToolbar]]'></div>
<div class='title' macro='view title'></div>
<div class='editor' macro='edit title'></div>
<div macro='annotations'></div>
<div class='editor' macro='edit text'></div>
<div class='editor' macro='edit tags'></div><div class='editorFooter'><span macro='message views.editor.tagPrompt'></span><span macro='tagChooser excludeLists'></span></div>
<!--}}}-->
To get started with this blank [[TiddlyWiki]], you'll need to modify the following tiddlers:
* [[SiteTitle]] & [[SiteSubtitle]]: The title and subtitle of the site, as shown above (after saving, they will also appear in the browser title bar)
* [[MainMenu]]: The menu (usually on the left)
* [[DefaultTiddlers]]: Contains the names of the tiddlers that you want to appear when the TiddlyWiki is opened
You'll also need to enter your username for signing your edits: <<option txtUserName>>
These [[InterfaceOptions]] for customising [[TiddlyWiki]] are saved in your browser

Your username for signing your edits. Write it as a [[WikiWord]] (eg [[JoeBloggs]])

<<option txtUserName>>
<<option chkSaveBackups>> [[SaveBackups]]
<<option chkAutoSave>> [[AutoSave]]
<<option chkRegExpSearch>> [[RegExpSearch]]
<<option chkCaseSensitiveSearch>> [[CaseSensitiveSearch]]
<<option chkAnimate>> [[EnableAnimations]]

----
Also see [[AdvancedOptions]]
<<importTiddlers>>
\[
\begin{xy}
\xymatrix {
*\txt{start} \ar[r]
 & *++[o][F-]{0} \ar@(r,u)[]^b \ar[r]_a
 & *++[o][F-]{1} \ar[r]^b \ar@(r,d)[]_a
 & *++[o][F-]{2} \ar[r]^b
  \ar `dr_l[l] `_ur[l] _(.2)a[l]
 & *++[o][F=]{3}
  \ar `ur^l[lll] `^dr[lll]^b [lll]
  \ar `dr_l[ll] `_ur[ll] [ll]
}
\end{xy}
\]

Source Code:
{{{
\begin{xy}
\xymatrix {
*\txt{start} \ar[r]
 & *++[o][F-]{0} \ar@(r,u)[]^b \ar[r]_a
 & *++[o][F-]{1} \ar[r]^b \ar@(r,d)[]_a
 & *++[o][F-]{2} \ar[r]^b
  \ar `dr_l[l] `_ur[l] _(.2)a[l]
 & *++[o][F=]{3}
  \ar `ur^l[lll] `^dr[lll]^b [lll]
  \ar `dr_l[ll] `_ur[ll] [ll]
}
\end{xy}
}}}
\[
\begin{xy}
0;<1em,0em>:
(0,0);p+/v a(18) 3em/**@{.} ?>*@{>},
(0,-1.5);p+/v a(18) 3em/**@{.} ?>*@{<},
(0,-3);p+/v a(18) 3em/**@{.} ?>*@{|},
(0,-4.5);p+/v a(18) 3em/**@{.} ?>*@{(},
(0,-6);p+/v a(18) 3em/**@{.} ?>*@{)},

(5,0);p+/v a(18) 3em/**@{.} ?>*@^{>},
(5,-1.5);p+/v a(18) 3em/**@{.} ?>*@^{<},
(5,-3);p+/v a(18) 3em/**@{.} ?>*@^{|},
(5,-4.5);p+/v a(18) 3em/**@{.} ?>*@^{(},
(5,-6);p+/v a(18) 3em/**@{.} ?>*@^{)},
(5,-7.5);p+/v a(18) 3em/**@{.} ?>*@^{`},
(5,-9);p+/v a(18) 3em/**@{.} ?>*@^{'},

(10,0);p+/v a(18) 3em/**@{.} ?>*@_{>},
(10,-1.5);p+/v a(18) 3em/**@{.} ?>*@_{<},
(10,-3);p+/v a(18) 3em/**@{.} ?>*@_{|},
(10,-4.5);p+/v a(18) 3em/**@{.} ?>*@_{(},
(10,-6);p+/v a(18) 3em/**@{.} ?>*@_{)},
(10,-7.5);p+/v a(18) 3em/**@{.} ?>*@_{`},
(10,-9);p+/v a(18) 3em/**@{.} ?>*@_{'},

(15,0);p+/v a(18) 3em/**@{} ?>*@2{>} **@2{.},
(15,-1.5);p+/v a(18) 3em/**@{} ?>*@2{<} **@2{.},
(15,-3);p+/v a(18) 3em/**@2{.} ?>*@2{|},

(20,0);p+/v a(18) 3em/**@{} ?>*@3{>} **@3{.},,
(20,-1.5);p+/v a(18) 3em/**@{} ?>*@3{<} **@3{.},,
(20,-3);p+/v a(18) 3em/**@3{.} ?>*@3{|},

(0,-13);p+/v a(18) 3em/**@{.} ?>*@{>>},
(0,-14.5);p+/v a(18) 3em/**@{.} ?>*@{<<},
(0,-16);p+/v a(18) 3em/**@{.} ?>*@{||},
(0,-17.5);p+/v a(18) 3em/**@{.} ?>*@{|-},
(0,-19);p+/v a(18) 3em/**@{.} ?>*@{>|},
(0,-20.5);p+/v a(18) 3em/**@{.} ?>*@{+},

(5,-13);p+/v a(18) 3em/**@{.} ?>*@^{>>},
(5,-14.5);p+/v a(18) 3em/**@{.} ?>*@^{<<},
(5,-16);p+/v a(18) 3em/**@{.} ?>*@^{||},
(5,-17.5);p+/v a(18) 3em/**@{.} ?>*@^{|-},
(5,-19);p+/v a(18) 3em/**@{.} ?>*@{>>|},
(5,-20.5);p+/v a(18) 3em/**@{.} ?>*@{x},

(10,-13);p+/v a(18) 3em/**@{.} ?>*@_{>>},
(10,-14.5);p+/v a(18) 3em/**@{.} ?>*@_{<<},
(10,-16);p+/v a(18) 3em/**@{.} ?>*@_{||},
(10,-17.5);p+/v a(18) 3em/**@{.} ?>*@_{|-},
(10,-19);p+/v a(18) 3em/**@{.} ?>*@{|<},
(10,-20.5);p+/v a(18) 3em/**@{.} ?>*@{/},

(15,-13);p+/v a(18) 3em/**@{} ?>*@2{>>} **@2{.},
(15,-14.5);p+/v a(18) 3em/**@{} ?>*@2{<<} **@2{.},
(15,-16);p+/v a(18) 3em/**@{.} ?>*@2{||},
(15,-17.5);p+/v a(18) 3em/**@{.} ?>*@2{|-},
(15,-19);p+/v a(18) 3em/**@{.} ?>*@{|<<},
(15,-20.5);p+/v a(18) 3em/**@{.} ?>*@{//},

(20,-13);p+/v a(18) 3em/**@{} ?>*@3{>>} **@3{.},
(20,-14.5);p+/v a(18) 3em/**@{} ?>*@3{<<} **@3{.},
(20,-16);p+/v a(18) 3em/**@{.} ?>*@3{||},
(20,-17.5);p+/v a(18) 3em/**@{.} ?>*@3{|-},
(20,-19);p+/v a(18) 3em/**@{.} ?>*@{*},
(20,-20.5);p+/v a(18) 3em/**@{.} ?>*@{o},
\end{xy}
\]
\[
\newdir{ >}{{}*!/-3pt/@{>}}
\begin{xy}
0*+{A}="a", <5pc, 1pc>*+{B}="b"
\ar @{>->} "a";"b" <2pt>
\ar @{ >->} "a";"b" <-2pt>
\end{xy}
\]
\[
\newdir{m}{{}*!/-2pt/@^{(}}
\begin{xy}
0*+{A}="a", <5pc, 1pc>*+{B}="b"
\ar @{m->} "a";"b"
\end{xy}
\]

Source code:
{{{
\begin{xy}
0;<1em,0em>:
(0,0);p+/v a(18) 3em/**@{.} ?>*@{>},
(0,-1.5);p+/v a(18) 3em/**@{.} ?>*@{<},
(0,-3);p+/v a(18) 3em/**@{.} ?>*@{|},
(0,-4.5);p+/v a(18) 3em/**@{.} ?>*@{(},
(0,-6);p+/v a(18) 3em/**@{.} ?>*@{)},

(5,0);p+/v a(18) 3em/**@{.} ?>*@^{>},
(5,-1.5);p+/v a(18) 3em/**@{.} ?>*@^{<},
(5,-3);p+/v a(18) 3em/**@{.} ?>*@^{|},
(5,-4.5);p+/v a(18) 3em/**@{.} ?>*@^{(},
(5,-6);p+/v a(18) 3em/**@{.} ?>*@^{)},
(5,-7.5);p+/v a(18) 3em/**@{.} ?>*@^{`},
(5,-9);p+/v a(18) 3em/**@{.} ?>*@^{'},

(10,0);p+/v a(18) 3em/**@{.} ?>*@_{>},
(10,-1.5);p+/v a(18) 3em/**@{.} ?>*@_{<},
(10,-3);p+/v a(18) 3em/**@{.} ?>*@_{|},
(10,-4.5);p+/v a(18) 3em/**@{.} ?>*@_{(},
(10,-6);p+/v a(18) 3em/**@{.} ?>*@_{)},
(10,-7.5);p+/v a(18) 3em/**@{.} ?>*@_{`},
(10,-9);p+/v a(18) 3em/**@{.} ?>*@_{'},

(15,0);p+/v a(18) 3em/**@{} ?>*@2{>} **@2{.},
(15,-1.5);p+/v a(18) 3em/**@{} ?>*@2{<} **@2{.},
(15,-3);p+/v a(18) 3em/**@2{.} ?>*@2{|},

(20,0);p+/v a(18) 3em/**@{} ?>*@3{>} **@3{.},,
(20,-1.5);p+/v a(18) 3em/**@{} ?>*@3{<} **@3{.},,
(20,-3);p+/v a(18) 3em/**@3{.} ?>*@3{|},

(0,-13);p+/v a(18) 3em/**@{.} ?>*@{>>},
(0,-14.5);p+/v a(18) 3em/**@{.} ?>*@{<<},
(0,-16);p+/v a(18) 3em/**@{.} ?>*@{||},
(0,-17.5);p+/v a(18) 3em/**@{.} ?>*@{|-},
(0,-19);p+/v a(18) 3em/**@{.} ?>*@{>|},
(0,-20.5);p+/v a(18) 3em/**@{.} ?>*@{+},

(5,-13);p+/v a(18) 3em/**@{.} ?>*@^{>>},
(5,-14.5);p+/v a(18) 3em/**@{.} ?>*@^{<<},
(5,-16);p+/v a(18) 3em/**@{.} ?>*@^{||},
(5,-17.5);p+/v a(18) 3em/**@{.} ?>*@^{|-},
(5,-19);p+/v a(18) 3em/**@{.} ?>*@{>>|},
(5,-20.5);p+/v a(18) 3em/**@{.} ?>*@{x},

(10,-13);p+/v a(18) 3em/**@{.} ?>*@_{>>},
(10,-14.5);p+/v a(18) 3em/**@{.} ?>*@_{<<},
(10,-16);p+/v a(18) 3em/**@{.} ?>*@_{||},
(10,-17.5);p+/v a(18) 3em/**@{.} ?>*@_{|-},
(10,-19);p+/v a(18) 3em/**@{.} ?>*@{|<},
(10,-20.5);p+/v a(18) 3em/**@{.} ?>*@{/},

(15,-13);p+/v a(18) 3em/**@{} ?>*@2{>>} **@2{.},
(15,-14.5);p+/v a(18) 3em/**@{} ?>*@2{<<} **@2{.},
(15,-16);p+/v a(18) 3em/**@{.} ?>*@2{||},
(15,-17.5);p+/v a(18) 3em/**@{.} ?>*@2{|-},
(15,-19);p+/v a(18) 3em/**@{.} ?>*@{|<<},
(15,-20.5);p+/v a(18) 3em/**@{.} ?>*@{//},

(20,-13);p+/v a(18) 3em/**@{} ?>*@3{>>} **@3{.},
(20,-14.5);p+/v a(18) 3em/**@{} ?>*@3{<<} **@3{.},
(20,-16);p+/v a(18) 3em/**@{.} ?>*@3{||},
(20,-17.5);p+/v a(18) 3em/**@{.} ?>*@3{|-},
(20,-19);p+/v a(18) 3em/**@{.} ?>*@{*},
(20,-20.5);p+/v a(18) 3em/**@{.} ?>*@{o},
\end{xy}
}}}
{{{
\newdir{ >}{{}*!/-3pt/@{>}}
\begin{xy}
0*+{A}="a", <5pc, 1pc>*+{B}="b"
\ar @{>->} "a";"b" <2pt>
\ar @{ >->} "a";"b" <-2pt>
\end{xy}
}}}
{{{
\newdir{m}{{}*!/-2pt/@^{(}}
\begin{xy}
0*+{A}="a", <5pc, 1pc>*+{B}="b"
\ar @{m->} "a";"b"
\end{xy}
}}}
\[
\begin{xy}
(0,0)*+++\txt{\frm{_\}}} *\frm{_\}}="0"
+/d3em/*+++\txt{\frm{_)}} *\frm{_)},

"0"+/r8em/*+++\txt{\frm{^\}}} *\frm{^\}},
+/d3em/*+++\txt{\frm{^)}} *\frm{^)},

"0"+/r16em/*+++\txt{\frm{\{}} *\frm{\{},
+/d3em/*+++\txt{\frm{(}} *\frm{(},

"0"+/r24em/*+++\txt{\frm{\}}} *\frm{\}},
+/d3em/*+++\txt{\frm{)}} *\frm{)},
\end{xy}
\]

\[
\begin{xy}
(0,0)  *+++{A} ;
(10,7) *+++{B} **\frm{.}
**\frm{^\}} ; **\frm{_\}} 
\end{xy}
\]

Source code:
{{{
\begin{xy}
(0,0)*+++\txt{\frm{_\}}} *\frm{_\}}="0"
+/d3em/*+++\txt{\frm{_)}} *\frm{_)},

"0"+/r8em/*+++\txt{\frm{^\}}} *\frm{^\}},
+/d3em/*+++\txt{\frm{^)}} *\frm{^)},

"0"+/r16em/*+++\txt{\frm{\{}} *\frm{\{},
+/d3em/*+++\txt{\frm{(}} *\frm{(},

"0"+/r24em/*+++\txt{\frm{\}}} *\frm{\}},
+/d3em/*+++\txt{\frm{)}} *\frm{)},
\end{xy}
}}}
{{{
\begin{xy}
(0,0)  *+++{A} ;
(10,7) *+++{B} **\frm{.}
**\frm{^\}} ; **\frm{_\}} 
\end{xy}
}}}
\[
\begin{xy}
0;<1em,0em>:
(0,0)*\cir<0.5em>{},
(0,-2)*\cir<0.5em>{l^l},
+/r2em/*\cir<0.5em>{l^r},
+/r2em/*\cir<0.5em>{l^d},
+/r2em/*\cir<0.5em>{l^u},
+/r2em/*\cir<0.5em>{l^dl},
+/r2em/*\cir<0.5em>{l^dr},
+/r2em/*\cir<0.5em>{l^ul},
+/r2em/*\cir<0.5em>{l^ur},
(0,-4)*\cir<0.5em>{l_l},
+/r2em/*\cir<0.5em>{l_r},
+/r2em/*\cir<0.5em>{l_d},
+/r2em/*\cir<0.5em>{l_u},
+/r2em/*\cir<0.5em>{l_dl},
+/r2em/*\cir<0.5em>{l_dr},
+/r2em/*\cir<0.5em>{l_ul},
+/r2em/*\cir<0.5em>{l_ur},
\end{xy}
\]

Source code:
{{{
\begin{xy}
0;<1em,0em>:
(0,0)*\cir<0.5em>{},
(0,-2)*\cir<0.5em>{l^l},
+/r2em/*\cir<0.5em>{l^r},
+/r2em/*\cir<0.5em>{l^d},
+/r2em/*\cir<0.5em>{l^u},
+/r2em/*\cir<0.5em>{l^dl},
+/r2em/*\cir<0.5em>{l^dr},
+/r2em/*\cir<0.5em>{l^ul},
+/r2em/*\cir<0.5em>{l^ur},
(0,-4)*\cir<0.5em>{l_l},
+/r2em/*\cir<0.5em>{l_r},
+/r2em/*\cir<0.5em>{l_d},
+/r2em/*\cir<0.5em>{l_u},
+/r2em/*\cir<0.5em>{l_dl},
+/r2em/*\cir<0.5em>{l_dr},
+/r2em/*\cir<0.5em>{l_ul},
+/r2em/*\cir<0.5em>{l_ur},
\end{xy}
}}}
If you have any questions, please let me know.
* ''e-mail'': Isao Sonobe <sonoisa@gmail.com>
* ''facebook'': http://www.facebook.com/sonobe

\[
\begin{xy}
<1em,0em>:
(0,0)*+{\text{MathJax}}="mathjax", (12,0)*+{\text{Xy-pic}}="xypic",
"mathjax";"xypic" **\crv{~*{\heartsuit} (6,5)} **\crv{~*{\heartsuit} (6,-5)},
(6,0)*{\text{XyJax}}="xyjax"
\end{xy}
\]
\[
\begin{xy}
\xymatrix {
{\mathscr{C}} & 
  a \ar[r]^f \ar[dr]_{g \circ f} & 
  b \ar[d]^g & 
  \ar@{~>}[r]^F & &
  Fa \ar[r]^{Ff} \ar[dr]_*[l]{\scriptstyle F(g\circ f) = Fg\circ Ff} & 
  Fb \ar[d]^{Fg} & {\mathscr{D}} \\
&& c & \ar@{~>}[r]^F &&& Fc
}
\end{xy}
\]

Source code:
{{{
\begin{xy}
\xymatrix {
{\mathscr{C}} & 
  a \ar[r]^f \ar[dr]_{g \circ f} & 
  b \ar[d]^g & 
  \ar@{~>}[r]^F & &
  Fa \ar[r]^{Ff} \ar[dr]_*[l]{\scriptstyle F(g\circ f) = Fg\circ Ff} & 
  Fb \ar[d]^{Fg} & {\mathscr{D}} \\
&& c & \ar@{~>}[r]^F &&& Fc
}
\end{xy}
}}}
\[
\begin{xy}
<0em,4em>*+[o]{A}="A";<12em,0em>*+{B}="B",
"A";"B" **\crv{~**@{~}},
"A";"B" **\crv{~**@2{~} <6em,6em>},
"A";"B" **\crv{~**@{--} <4em,8em>&<8em,8em>},
"A";"B" **\crv{<2em,4em>&<6em,4em>&<10em,-4em>&<12em,-2em>}
\end{xy}
\]

Source code:
{{{
\begin{xy}
<0em,4em>*+[o]{A}="A";<12em,0em>*+{B}="B",
"A";"B" **\crv{~**@{~}},
"A";"B" **\crv{~**@2{~} <6em,6em>},
"A";"B" **\crv{~**@{--} <4em,8em>&<8em,8em>},
"A";"B" **\crv{<2em,4em>&<6em,4em>&<10em,-4em>&<12em,-2em>}
\end{xy}
}}}
XyJax
[[Samples]]
Download from https://github.com/sonoisa/XyJax
\[
\begin{xy}
<-0.4cm,0cm>="A";<10cm,0cm>="B",
"A";"B" **\crv{<2cm,2cm>&<2cm,-3cm>&<5cm,1cm>&<7cm,0cm>}
?<*@{|} ?</1cm/*@{|} ?</2cm/*@{|} ?</3cm/*@{|} ?</4cm/*@{|}
?</5cm/*@{|} ?</6cm/*@{|} ?</7cm/*@{|} ?</8cm/*@{|} ?</9cm/*@{|}
?</10cm/*@{|} ?</11cm/*@{|} ?</12cm/*@{|} ?</13cm/*@{|}
\end{xy}
\]

Source code:
{{{
\begin{xy}
<-0.4cm,0cm>="A";<10cm,0cm>="B",
"A";"B" **\crv{<2cm,2cm>&<2cm,-3cm>&<5cm,1cm>&<7cm,0cm>}
?<*@{|} ?</1cm/*@{|} ?</2cm/*@{|} ?</3cm/*@{|} ?</4cm/*@{|}
?</5cm/*@{|} ?</6cm/*@{|} ?</7cm/*@{|} ?</8cm/*@{|} ?</9cm/*@{|}
?</10cm/*@{|} ?</11cm/*@{|} ?</12cm/*@{|} ?</13cm/*@{|}
\end{xy}
}}}
\[
\begin{xy}
(0,0)*++{\text{\frm{}}} *\frm{}="0",
+/d3em/*++{\text{\frm{-}}} *\frm{-},
+/d3em/*++{\text{\frm{=}}} *\frm{=},
+/d3em/*++{\text{\frm{--}}} *\frm{--},
+/d3em/*++{\text{\frm{,}}} *\frm{,},
+/d3em/*++{\text{\frm{o}}} *\frm{o},
+/d3em/*++{\text{\frm{oo}}} *\frm{oo},
+/d3em/*++{\text{\frm{e}}} *\frm{e},
+/d3em/*++{\text{\frm{ee}}} *\frm{ee},
+/d3em/*++[]{\text{\frm{*}}} *\frm{*},
+/d1.8em/*++[]{\text{\frm{*}}},
+/d2em/*++[o]{\text{\frm{*}}} *\frm{*},
+/d1.8em/*++[o]{\text{\frm{*}}},

"0"+/r10em/*++{\text{\frm{.}}} *\frm{.},
+/d3em/*++{\text{\frm<8pt>{-}}} *\frm<8pt>{-},
+/d3em/*++{\text{\frm<8pt>{=}}} *\frm<8pt>{=},
+/d3em/*++{\text{\frm{o-}}} *\frm{o-},
+/d3em/*++{\text{\frm<3pt>{,}}} *\frm<3pt>{,},
+/d3em/*++{\text{\frm<8pt>{o}}} *\frm<8pt>{o},
+/d3em/*++{\text{\frm<8pt>{oo}}} *\frm<8pt>{oo},
+/d3em/*++{\text{\frm<20pt,8pt>{e}}} *\frm<20pt,8pt>{e},
+/d3em/*++{\text{\frm<20pt,8pt>{ee}}} *\frm<20pt,8pt>{ee},
+/d3em/*++[]{\text{\frm{**}}} *\frm{**},
+/d1.8em/*++[]{\text{\frm{**}}},
+/d2em/*++[o]{\text{\frm{**}}} *\frm{**},
+/d1.8em/*++[o]{\text{\frm{**}}},

"0"+/r20em/*++{\text{\frm<20pt>{.}}} *\frm<20pt>{.},
+/d3em/*++{\text{\frm<20pt>{-}}} *\frm<20pt>{-},
+/d3em/*++{\text{\frm<20pt>{=}}} *\frm<20pt>{=},
+/d3em/*++{\text{\frm<20pt>{--}}} *\frm<20pt>{--},
+/d3em/*++{\text{\frm{-,}}} *\frm{-,},
+/d3em/*++{\text{\frm{.o}}} *\frm{.o},
+/d3em/*++{\text{\frm{-o}}} *\frm{-o},
+/d3em/*++{\text{\frm{.e}}} *\frm{.e},
+/d3em/*++{\text{\frm{-e}}} *\frm{-e},
+/d3em/*++[]{\text{\frm<6pt>{*}}} *\frm<6pt>{*},
+/d1.8em/*++[]{\text{\frm<6pt>{*}}},
+/d2em/*++[o]{\text{\frm<6pt>{*}}} *\frm<6pt>{*},
+/d1.8em/*++[o]{\text{\frm<6pt>{*}}},
\end{xy}
\]
\[
\begin{xy}
*+<1.5pt>[F**:white]++[F**:red]{\text{text with background}},
+!D+/d1pc/, *++[F**:black][white]{\bf{\text{bold white on black}}}
\end{xy}
\]

Source code:
{{{
\begin{xy}
(0,0)*++{\text{\frm{}}} *\frm{}="0",
+/d3em/*++{\text{\frm{-}}} *\frm{-},
+/d3em/*++{\text{\frm{=}}} *\frm{=},
+/d3em/*++{\text{\frm{--}}} *\frm{--},
+/d3em/*++{\text{\frm{,}}} *\frm{,},
+/d3em/*++{\text{\frm{o}}} *\frm{o},
+/d3em/*++{\text{\frm{oo}}} *\frm{oo},
+/d3em/*++{\text{\frm{e}}} *\frm{e},
+/d3em/*++{\text{\frm{ee}}} *\frm{ee},
+/d3em/*++[]{\text{\frm{*}}} *\frm{*},
+/d1.8em/*++[]{\text{\frm{*}}},
+/d2em/*++[o]{\text{\frm{*}}} *\frm{*},
+/d1.8em/*++[o]{\text{\frm{*}}},

"0"+/r10em/*++{\text{\frm{.}}} *\frm{.},
+/d3em/*++{\text{\frm<8pt>{-}}} *\frm<8pt>{-},
+/d3em/*++{\text{\frm<8pt>{=}}} *\frm<8pt>{=},
+/d3em/*++{\text{\frm{o-}}} *\frm{o-},
+/d3em/*++{\text{\frm<3pt>{,}}} *\frm<3pt>{,},
+/d3em/*++{\text{\frm<8pt>{o}}} *\frm<8pt>{o},
+/d3em/*++{\text{\frm<8pt>{oo}}} *\frm<8pt>{oo},
+/d3em/*++{\text{\frm<20pt,8pt>{e}}} *\frm<20pt,8pt>{e},
+/d3em/*++{\text{\frm<20pt,8pt>{ee}}} *\frm<20pt,8pt>{ee},
+/d3em/*++[]{\text{\frm{**}}} *\frm{**},
+/d1.8em/*++[]{\text{\frm{**}}},
+/d2em/*++[o]{\text{\frm{**}}} *\frm{**},
+/d1.8em/*++[o]{\text{\frm{**}}},

"0"+/r20em/*++{\text{\frm<20pt>{.}}} *\frm<20pt>{.},
+/d3em/*++{\text{\frm<20pt>{-}}} *\frm<20pt>{-},
+/d3em/*++{\text{\frm<20pt>{=}}} *\frm<20pt>{=},
+/d3em/*++{\text{\frm<20pt>{--}}} *\frm<20pt>{--},
+/d3em/*++{\text{\frm{-,}}} *\frm{-,},
+/d3em/*++{\text{\frm{.o}}} *\frm{.o},
+/d3em/*++{\text{\frm{-o}}} *\frm{-o},
+/d3em/*++{\text{\frm{.e}}} *\frm{.e},
+/d3em/*++{\text{\frm{-e}}} *\frm{-e},
+/d3em/*++[]{\text{\frm<6pt>{*}}} *\frm<6pt>{*},
+/d1.8em/*++[]{\text{\frm<6pt>{*}}},
+/d2em/*++[o]{\text{\frm<6pt>{*}}} *\frm<6pt>{*},
+/d1.8em/*++[o]{\text{\frm<6pt>{*}}},
\end{xy}
}}}
{{{
\begin{xy}
*+<1.5pt>[F**:white]++[F**:red]{\text{text with background}},
+!D+/d1pc/, *++[F**:black][white]{\bf{\text{bold white on black}}}
\end{xy}
}}}
See https://github.com/sonoisa/XyJax/blob/master/README.md
\[
\begin{xy}
0;<1em,0em>:
(0,0)*={+}="+"; (6,3)*={\times}="*" **@{.},
(3,0)*{A}; (6,6)*{B} **@{-}
?!{"+";"*"} *{\oplus}
\end{xy}

\begin{xy}
(0,0)*{A}="A"; p+/r5pc/+/u3pc/*{B}="B",
p+<1pc,3pc>*{C}="C", p+<4pc,-1pc>*{D}="D",
"D";"C"**\crv{<3pc,2pc>},
?!{"A";"B"**@{-}}*{\oplus}
\end{xy}

\begin{xy}
(0,0)*{A}="A"; p+/r5pc/+/u3pc/*{B}="B",
p+<1pc,3pc>*{C}="C", p+<4pc,-1pc>*{D}="D",
"A";"B"**\crv{<2pc,3pc>&<3pc,-2pc>},
?!{"D";"C"**\crv{<3pc,2pc>}}*{\oplus}
\end{xy}
\]

\[
\begin{xy}
(0,0)*{A}="A"; p+/r5pc/+/u3pc/*{B}="B",
p-<.5pc,2pc>*{C}="C", p+<6pc,-.5pc>*{D}="D",
"A";"B"**\crv{<6pc,-5pc>},
?!{"C";"D"**@{-}}*{\otimes}
\end{xy}

\begin{xy}
(0,0)*{A}="A"; p+/r5pc/+/u3pc/*{B}="B",
p-<.5pc,2pc>*{C}="C", p+<6pc,-.5pc>*{D}="D",
"A";"B"**\crv{<4pc,-2pc>},
?!{"C";"D"**@{-}}="E"*{\times},
"E"+/_3pc/;"E"**@{},
?!{"C";"D"}="F",
"E";"F"**@{.} ?>/1em/*!/^1em/{\text{nearest point}}
\end{xy}
\]

Source code:
{{{
\begin{xy}
0;<1em,0em>:
(0,0)*={+}="+"; (6,3)*={\times}="*" **@{.},
(3,0)*{A}; (6,6)*{B} **@{-}
?!{"+";"*"} *{\oplus}
\end{xy}

\begin{xy}
(0,0)*{A}="A"; p+/r5pc/+/u3pc/*{B}="B",
p+<1pc,3pc>*{C}="C", p+<4pc,-1pc>*{D}="D",
"D";"C"**\crv{<3pc,2pc>},
?!{"A";"B"**@{-}}*{\oplus}
\end{xy}

\begin{xy}
(0,0)*{A}="A"; p+/r5pc/+/u3pc/*{B}="B",
p+<1pc,3pc>*{C}="C", p+<4pc,-1pc>*{D}="D",
"A";"B"**\crv{<2pc,3pc>&<3pc,-2pc>},
?!{"D";"C"**\crv{<3pc,2pc>}}*{\oplus}
\end{xy}

\begin{xy}
(0,0)*{A}="A"; p+/r5pc/+/u3pc/*{B}="B",
p-<.5pc,2pc>*{C}="C", p+<6pc,-.5pc>*{D}="D",
"A";"B"**\crv{<6pc,-5pc>},
?!{"C";"D"**@{-}}*{\otimes}
\end{xy}

\begin{xy}
(0,0)*{A}="A"; p+/r5pc/+/u3pc/*{B}="B",
p-<.5pc,2pc>*{C}="C", p+<6pc,-.5pc>*{D}="D",
"A";"B"**\crv{<4pc,-2pc>},
?!{"C";"D"**@{-}}="E"*{\times},
"E"+/_3pc/;"E"**@{},
?!{"C";"D"}="F",
"E";"F"**@{.} ?>/1em/*!/^1em/{\text{nearest point}}
\end{xy}
}}}
\[
\begin{xy}
\xymatrix @C=4pc {
  x \ar@(lu,ld) []_{id} \ar@/^/^f [r]
& f(x) \ar@/^/^{f^{-1}} [l]
}
\end{xy}
\]
\[
\begin{xy}
*+[o]{x}="x", <6em,0em>*+{f(x)}="fx",
"x";"fx" **\crv{<3em,1.5em>} ?>*@{>} ?<>(.5)*!/_.5em/{\scriptstyle f}, 
"x";"fx" **\crv{<3em,-1.5em>} ?<*@{<} ?<>(.5)*!/^.5em/{\scriptstyle f^{-1}}, 
"x";"x" **\crv{<-3em,3em>&<-3em,-3em>} ?>*@{>} ?<>(.5)*!/^.5em/{\scriptstyle id}
\end{xy}
\]

Source code:
{{{
\begin{xy}
\xymatrix @C=4pc {
  x \ar@(lu,ld) []_{id} \ar@/^/^f [r]
& f(x) \ar@/^/^{f^{-1}} [l]
}
\end{xy}
}}}
{{{
\begin{xy}
*+[o]{x}="x", <6em,0em>*+{f(x)}="fx",
"x";"fx" **\crv{<3em,1.5em>} ?>*@{>} ?<>(.5)*!/_.5em/{\scriptstyle f}, 
"x";"fx" **\crv{<3em,-1.5em>} ?<*@{<} ?<>(.5)*!/^.5em/{\scriptstyle f^{-1}}, 
"x";"x" **\crv{<-3em,3em>&<-3em,-3em>} ?>*@{>} ?<>(.5)*!/^.5em/{\scriptstyle id}
\end{xy}
}}}
You can redistribute the XyJax and/or modify it under the terms of the Apache License, Version 2.0. 

{{{
Copyright (c) 2011-2012 Isao Sonobe <sonoisa@gmail.com>

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
}}}
\[
\begin{xy}
0;<1em,0em>:
(1,1);p+/v a(18) 5.5em/**@{-},
(1,3);p+/v a(18) 5.5em/**@2{-},
(1,5);p+/v a(18) 5.5em/**@3{-},

(1,9);p+/v a(18) 5.5em/**@{.},
(1,11);p+/v a(18) 5.5em/**@2{.},
(1,13);p+/v a(18) 5.5em/**@3{..},

(8,1);p+/v a(18) 5.5em/**@{--},
(8,3);p+/v a(18) 5.5em/**@2{--},
(8,5);p+/v a(18) 5.5em/**@3{--},

(8,9);p+/v a(18) 5.5em/**@{~},
(8,11);p+/v a(18) 5.5em/**@2{~},
(8,13);p+/v a(18) 5.5em/**@3{~},

(15,1);p+/v a(18) 5.5em/**@{~~},
(15,3);p+/v a(18) 5.5em/**@2{~~},
(15,5);p+/v a(18) 5.5em/**@3{~~},
\end{xy}
\]

Source code:
{{{
\begin{xy}
0;<1em,0em>:
(1,1);p+/v a(18) 5.5em/**@{-},
(1,3);p+/v a(18) 5.5em/**@2{-},
(1,5);p+/v a(18) 5.5em/**@3{-},

(1,9);p+/v a(18) 5.5em/**@{.},
(1,11);p+/v a(18) 5.5em/**@2{.},
(1,13);p+/v a(18) 5.5em/**@3{..},

(8,1);p+/v a(18) 5.5em/**@{--},
(8,3);p+/v a(18) 5.5em/**@2{--},
(8,5);p+/v a(18) 5.5em/**@3{--},

(8,9);p+/v a(18) 5.5em/**@{~},
(8,11);p+/v a(18) 5.5em/**@2{~},
(8,13);p+/v a(18) 5.5em/**@3{~},

(15,1);p+/v a(18) 5.5em/**@{~~},
(15,3);p+/v a(18) 5.5em/**@2{~~},
(15,5);p+/v a(18) 5.5em/**@3{~~},
\end{xy}
}}}
About XyJax
[[Samples]]
ToDo
[[Download]]
[[HowToInstall]]
[[License]]
[[Contact]]
> MathJax is an open source JavaScript display engine for mathematics that works in all modern browsers.
Please visit [[MathJax's official site|http://www.mathjax.org/]].
\[
\begin{xy}
0;<0.8pc,0pc>:
(0,0)="o", "o"*!/rd 1em/{O},
"o"+/l 3pc/="xs";"o"+/r 13pc/="xe" **@{-} ?>*@{>} ?>*!/u 1em/{x},
"o"+/d 3pc/="ys";"o"+/u 8pc/="ye" **@{-} ?>*@{>} ?>*!/r 1em/{y},
(13,10)*{y=f(x)},
(13,-3)*{x_{n+1} = x_n - \frac{f(x_n)}{f'(x_n)}},

(13.5,0)="x0" *!/u 1em/{x_0},

(-3,-4)="A", (15,9)="B", (1.5,5)="C", (10,-2.5)="D",
"A";"B" **\crv{"C"&"D"},
?!{"x0"+/d 3pc/;"x0"+/u 10pc/}="fx0" +/3pc/="L1e" -/12pc/="L1s";"L1e" **\dir{--},
?!{"xs";"xe"}="x1" *!/u 1em/{x_1},
"fx0";"fx0"+/l 20pc/ **@{} ?!{"ys";"ye"}="y0" *!/r 1em/{f(x_0)},
"fx0";"y0" **@{.},
"x0";"fx0" **@{.},
"L1e" *!/l 5em/{y=f(x_0)+f'(x_0)(x-x_0)},

"A";"B" **\crv{~**@{} "C"&"D"},
?!{"x1"+/d 3pc/;"x1"+/u 10pc/}="fx1" +/5pc/="L2e" -/15pc/="L2s";"L2e" **\dir{--},
?!{"xs";"xe"}="x2" *!/u 1em/{x_2},
"fx1";"fx1"+/l 20pc/ **@{} ?!{"ys";"ye"}="y1" *!/r 1em/{f(x_1)},
"fx1";"y1" **@{.},
"x1";"fx1" **@{.},
"L2e" *!/l 5em/{y=f(x_1)+f'(x_1)(x-x_1)},
\end{xy}
\]

Source code:
{{{
\begin{xy}
0;<0.8pc,0pc>:
(0,0)="o", "o"*!/rd 1em/{O},
"o"+/l 3pc/="xs";"o"+/r 13pc/="xe" **@{-} ?>*@{>} ?>*!/u 1em/{x},
"o"+/d 3pc/="ys";"o"+/u 8pc/="ye" **@{-} ?>*@{>} ?>*!/r 1em/{y},
(13,10)*{y=f(x)},
(13,-3)*{x_{n+1} = x_n - \frac{f(x_n)}{f'(x_n)}},

(13.5,0)="x0" *!/u 1em/{x_0},

(-3,-4)="A", (15,9)="B", (1.5,5)="C", (10,-2.5)="D",
"A";"B" **\crv{"C"&"D"},
?!{"x0"+/d 3pc/;"x0"+/u 10pc/}="fx0" +/3pc/="L1e" -/12pc/="L1s";"L1e" **\dir{--},
?!{"xs";"xe"}="x1" *!/u 1em/{x_1},
"fx0";"fx0"+/l 20pc/ **@{} ?!{"ys";"ye"}="y0" *!/r 1em/{f(x_0)},
"fx0";"y0" **@{.},
"x0";"fx0" **@{.},
"L1e" *!/l 5em/{y=f(x_0)+f'(x_0)(x-x_0)},

"A";"B" **\crv{~**@{} "C"&"D"},
?!{"x1"+/d 3pc/;"x1"+/u 10pc/}="fx1" +/5pc/="L2e" -/15pc/="L2s";"L2e" **\dir{--},
?!{"xs";"xe"}="x2" *!/u 1em/{x_2},
"fx1";"fx1"+/l 20pc/ **@{} ?!{"ys";"ye"}="y1" *!/r 1em/{f(x_1)},
"fx1";"y1" **@{.},
"x1";"fx1" **@{.},
"L2e" *!/l 5em/{y=f(x_1)+f'(x_1)(x-x_1)},
\end{xy}
}}}
\[
\begin{xy}
(0,0)*{}ABC}
\end{xy}
\]

Source code:
{{{
\begin{xy}
(0,0)*{}ABC}
\end{xy}
}}}
\[
\begin{xy}
<0.3pc,0pc>:(0,0)
*+{0}
\PATH ~={**@{-}} ~<{|<*@{<}} ~>{|>*@{>}}
'(10,1)*+{1}^{a} '(20,-2)*+{2}^{b} (30,0)*+{3}^{c}
\end{xy}
\]
\[
\begin{xy}
<4pc,0pc>:(0,0)
*+{base}="base"
\PATH ~={**@{-} ?>*@{>}}
`l    (-1,-1)*{A} ^a
`     (1,-1) *{B} ^b
`_ul  (1,0)  *{C} ^c
`ul^l "base"      ^d
"base"            ^e
\end{xy}
\]

Source Code:
{{{
\begin{xy}
<0.3pc,0pc>:(0,0)
*+{0}
\PATH ~={**@{-}} ~<{|<*@{<}} ~>{|>*@{>}}
'(10,1)*+{1}^{a} '(20,-2)*+{2}^{b} (30,0)*+{3}^{c}
\end{xy}

\begin{xy}
<4pc,0pc>:(0,0)
*+{base}="base"
\PATH ~={**@{-} ?>*@{>}}
`l    (-1,-1)*{A} ^a
`     (1,-1) *{B} ^b
`_ul  (1,0)  *{C} ^c
`ul^l "base"      ^d
"base"            ^e
\end{xy}
}}}
/***
|''Name''|PluginMathJax|
|''Description''|Displays TeX math using MathJax|
|''Author''|[[Canada East|http://tiddlywiki.canada-east.ca/]]|
|''Version''|1.4.1|
|''Date''|2010-10-18|
|''CodeRepository''|[[PluginMathJax|http://tiddlywiki.canada-east.ca/#PluginMathJax]]|
|''CoreVersion''|[[2.6.1|http://www.tiddlywiki.com]]|
|''Requires''|[[MathJax v1.01|http://www.mathjax.org/]]|
|''Feedback''|[[Contact|https://spreadsheets.google.com/viewform?formkey=dGg2RkpxZW5zWTh6QjZxOXgzZUlfakE6MQ]]|
!Description
This plugin uses [[MathJax|http://www.mathjax.org/]] to typeset ([[AMS|http://www.ams.org/publications/authors/tex/amslatex]]) [[LaTeX|http://www.latex-project.org/]] math. It can also be configured to use additional MathJax functionality.
>"MathJax is an open source JavaScript display engine for mathematics that works in all modern browsers."
!Notes
Right click any math display for a MathJax menu. The user can select the renderer and zoom settings. It performs best in [[Webkit|http://en.wikipedia.org/wiki/List_of_web_browsers#WebKit-based_browsers]] based browsers. Larger math displays such as the additional examples tiddler below can put quite a load on IE. PluginMathJax was inspired by : [[Plugin: jsMath|http://bob.mcelrath.org/tiddlyjsmath.html]]
!Installation
#''Backup'' your TiddlyWiki!
#Uninstall or remove systemConfig tag from Plugin: jsMath if it is installed.
#It is required that the MathJax directory is installed in '''js/MathJax/''' in the same location as the TiddlyWiki html file.<br>(Or edit the script source where commented in the plugin code below after installation to match the location of your MathJax install.)
#Install this plugin (and examples tiddler linked below if desired).
!Usage
|!Style|!Source|!Output|
|Inline &nbsp;&nbsp;&nbsp;|{{{The variable <math>x</math> is real.}}}|The variable <math>x</math> is real.|
|~|{{{The variable \(y\) is complex.}}}|The variable \(y\) is complex.|
|Block &nbsp;&nbsp;&nbsp;|{{{This \[\int_a^b x = \frac{1}{2}(b^2-a^2)\] is an easy integral.}}}|This \[\int_a^b x = \frac{1}{2}(b^2-a^2)\] is an easy integral.|
|~|{{{This $$\int_a^b \sin x = -(\cos b - \cos a)$$ is another easy integral.}}}|This $$\int_a^b \sin x = -(\cos b - \cos a)$$ is another easy integral.|
| <br />[[Complete list of supported LaTeX commands|http://www.mathjax.org/resources/docs/?tex.html#supported-latex-commands]] |>|>|
!Examples
[[Additional MathJax Examples|MathJax Examples]]
!Configuration
MathJax can be manually configured if desired by editing the code below (advanced). See the [[MathJax documentation|http://www.mathjax.org/resources/docs/?configuration.html#configuration-options-by-component]] for details.
!Revision History
*v1.4.1, 2010-10-18, minor change to createTiddlyElement call and added SyntaxHighlighter tags to code section.
*v1.4, 2010-10-09, re-wrote wikifiers, archived [[previous version|PluginMathJax v1.3]] (Plugin: jsMath - compatible).
*v1.3, 2010-10-07, returned to wikifiers design avoiding autoLink WikiWords conflict, kept modified wikify and recommended way of loading MathJax dynamically, removed the tex2jax extension and corrected several browser compatibility issues (InnerHTML for Opera and IE9).
*v1.2, 2010-10-05, removed some redundant MathJax config entries, moved modified wikify and MathJax.Hub.Queue call.
*v1.1, 2010-10-03, autoLinkWikiWords disabled in absence of DisableWikiLinksPlugin, modifed wikify.
*v1.0, 2010-09-26, Initial Release
!Code
<code=js>
***/
//{{{
if(!version.extensions.PluginMathJax) { 
    version.extensions.PluginMathJax = {installed: true};
    
    config.extensions.PluginMathJax = {
    
        install: function() {   
            var mjscript = document.createElement("script");
            mjscript.type = "text/javascript";
            
            // ***** Use the location of your MathJax! ***** :
            mjscript.src = "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-AMS_HTML";
            
            var mjconfig = 'MathJax.Hub.Config({' +
            'jax: ["input/TeX","output/HTML-CSS"],' +
            'extensions: ["tex2jax.js"],' +
            'TeX: { extensions: ["AMSmath.js","AMSsymbols.js","[Contrib]/xyjax/xypic.js"] },' +
            '"HTML-CSS": {' +
                'styles: {".MathJax_Preview": {visibility: "hidden"}},' +
                'scale: 115' +
                '},' +
            '"SVG": {' +
                'styles: {".MathJax_Preview": {visibility: "hidden"}},' +
                'scale: 115' +
                '},' +
            "tex2jax: {inlineMath: [['$','$']]}" +
            '});' +
            'MathJax.Hub.Startup.onload();'+
//            'MathJax.Hub.Register.LoadHook("[MathJax]/extensions/TeX/AMSmath.js", function () {MathJax.Hub.Startup.signal.Post("*** AMSmath Loaded ***")});'+
//            'MathJax.Hub.Register.LoadHook("[MathJax]/extensions/TeX/xypic.js", function () {MathJax.Hub.Startup.signal.Post("*** Xy-pic Loaded ***")});'+
//            'MathJax.Hub.Startup.signal.Post("*** In Startup Configuration code ***");'+
//            'MathJax.Hub.Register.StartupHook("onLoad",function () {'+
//            '    window.Message("*** The onLoad handler has run, page is ready to process ***");'+
//            '});'+
//            'MathJax.Hub.Queue(function () {window.Message("*** MathJax is done ***")});'+
//            'MathJax.Hub.Startup.signal.Interest(function (message) {window.Message("Startup: "+message)});'+
//            'MathJax.Hub.signal.Interest(function (message) {window.Message("Hub: "+message)});'+
//            'window.Message("##### events above this have already occurred #####");'+
            '';            
            window.Message = function (message) {
                console.log(message);
            };
            
            var ie9RegExp = /^9\./;
            var UseInnerHTML = (config.browser.isOpera || 
                                config.browser.isIE && 
                                ie9RegExp.test(config.browser.ieVersion[1]));
            if (UseInnerHTML) {mjscript.innerHTML = mjconfig;}
                else {mjscript.text = mjconfig;}
            document.getElementsByTagName("body")[0].appendChild(mjscript);
            
            config.formatterHelpers.mathFormatHelper = function(w) {
                this.lookaheadRegExp.lastIndex = w.matchStart;
                var lookaheadMatch = this.lookaheadRegExp.exec(w.source);
                if(lookaheadMatch && lookaheadMatch.index == w.matchStart) {
                    var text = lookaheadMatch[1];
                    if(UseInnerHTML) {
                        createTiddlyElement(w.output,this.element,null,null,null,this.attribs).innerHTML = text;
                     } else {
                        createTiddlyElement(w.output,this.element,null,null,text,this.attribs);
                     }
                    w.nextMatch = this.lookaheadRegExp.lastIndex;
                }
            };
            
            config.formatters.push({
              name: "inlineMath1",
              match: "\\\\\\\(",
              lookaheadRegExp: /\\\(([\s\S]+?)\\\)/mg,
              element: "script",
              attribs: {
                  type: "math/tex"
              },
              handler: config.formatterHelpers.mathFormatHelper
            });
            
            config.formatters.push({
              name: "inlineMath2",
              match: "<[Mm][Aa][Tt][Hh]>",
              lookaheadRegExp: /<math>([\s\S]+?)<\/math>/img,
              element: "script",
              attribs: {
                  type: "math/tex"
              },
              handler: config.formatterHelpers.mathFormatHelper
            });
            
            config.formatters.push({
              name: "displayMath1",
              match: "\\\\\\\[",
              lookaheadRegExp: /\\\[([\s\S]+?)\\\]/mg,
              element: "script",
              attribs: {
                  type: "math/tex; mode=display"
              },
              handler: config.formatterHelpers.mathFormatHelper
            });
            
            config.formatters.push({
              name: "displayMath2",
              match: "\\\${2}",
              lookaheadRegExp: /\${2}([\s\S]+?)\${2}/mg,
              element: "script",
              attribs: {
                  type: "math/tex; mode=display"
              },
              handler: config.formatterHelpers.mathFormatHelper
            });
            
            mj_old_wikify = wikify;
            wikify = function(source,output,highlightRegExp,tiddler)
            {
                mj_old_wikify.apply(this,arguments);
                if (window.MathJax) {MathJax.Hub.Queue(["Typeset",MathJax.Hub,output]);}
            };    
        }
        
    };
    
  config.extensions.PluginMathJax.install();

}

//}}}
//</code>
\[
\begin{xy}
0*++[c]\xybox{
\xymatrix @=1.5pc @*[F-] @*[o] @*+= {
3 \ar[r]^3 \ar[d]_3 \POS+/lu 1em/*\txt\tiny{1} & 
1 \ar[d]^1 \POS+/ru 1em/*\txt\tiny{2}  \\
3 \POS+/ld 1em/*\txt\tiny{1'} & 
1 \POS+/rd 1em/*\txt\tiny{2'}
}}="lu",

"lu"+/r8em/ *++[c]\xybox{
\xymatrix @=1.5pc @*[F-] @*[o] @*+= {
3 \ar[d]_3 \ar[rd]^3 & 
1 \ar[l]_3 \\
3 & 
1 \ar[u]_1
}}="u",

"u"+/r8em/ *++[c]\xybox{
\xymatrix @=1.5pc @*[F-] @*[o] @*+= {
3 \ar[r]^3 & 
1 \ar[ld]^(0.7){3} \ar[d]^2 \\
3 \ar[u]^3 & 
1 \ar[lu]_(0.7){3}
}}="ru",

"ru"+/d8em/ *++[c]\xybox{
\xymatrix @=1.5pc @*[F-] @*[o] @*+= {
3 \ar[d]_6 \ar[rd]_(0.7){3} & 
1 \ar[l]_3 \\
3 \ar[ru]_(0.7)3 & 
1 \ar[u]_2
}}="r",

"r"+/d8em/ *++[c]\xybox{
\xymatrix @=1.5pc @*[F-] @*[o] @*+= {
3 \ar[r]^3 & 
1 \ar[ld]^(0.7){3} \ar[d]^1 \\
3 \ar[u]^6 & 
1 \ar[lu]_(0.7){3}
}}="rd",

"rd"+/l8em/ *++[c]\xybox{
\xymatrix @=1.5pc @*[F-] @*[o] @*+= {
3 \ar[d]_3 & 
1 \ar[l]_3 \\
3 \ar[ru]_3 & 
1 \ar[u]_1
}}="d",

"d"+/l8em/ *++[c]\xybox{
\xymatrix @=1.5pc @*[F-] @*[o] @*+= {
3 \ar[r]^3 & 
1 \\
3 \ar[u]^3 & 
1 \ar[u]_1
}}="ld",

"lu"+/d8em/ *++[c]\xybox{
\xymatrix @=1.5pc @*[F-] @*[o] @*+= {
3 &
1 \ar[l]_3 \ar[d]^1 \\
3 \ar[u]^3 & 
1 
}}="l",

\POS "lu" \ar "u"^2
\POS "u" \ar "ru"^1
\POS "ru" \ar "r"^2
\POS "r" \ar "rd"^1
\POS "rd" \ar "d"_2
\POS "d" \ar "ld"_1
\POS "lu" \ar "l"_1
\POS "l" \ar "ld"_2
\end{xy}
\]
* ref. 黒木玄, "[[量子 dilogarithm 恒等式の作り方|http://genkuroki.web.fc2.com/20101228HowToMakeQDIs.html]]"

Source code:
{{{
\begin{xy}
0*++[c]\xybox{
\xymatrix @=1.5pc @*[F-] @*[o] @*+= {
3 \ar[r]^3 \ar[d]_3 \POS+/lu 1em/*\txt\tiny{1} & 
1 \ar[d]^1 \POS+/ru 1em/*\txt\tiny{2}  \\
3 \POS+/ld 1em/*\txt\tiny{1'} & 
1 \POS+/rd 1em/*\txt\tiny{2'}
}}="lu",

"lu"+/r8em/ *++[c]\xybox{
\xymatrix @=1.5pc @*[F-] @*[o] @*+= {
3 \ar[d]_3 \ar[rd]^3 & 
1 \ar[l]_3 \\
3 & 
1 \ar[u]_1
}}="u",

"u"+/r8em/ *++[c]\xybox{
\xymatrix @=1.5pc @*[F-] @*[o] @*+= {
3 \ar[r]^3 & 
1 \ar[ld]^(0.7){3} \ar[d]^2 \\
3 \ar[u]^3 & 
1 \ar[lu]_(0.7){3}
}}="ru",

"ru"+/d8em/ *++[c]\xybox{
\xymatrix @=1.5pc @*[F-] @*[o] @*+= {
3 \ar[d]_6 \ar[rd]_(0.7){3} & 
1 \ar[l]_3 \\
3 \ar[ru]_(0.7)3 & 
1 \ar[u]_2
}}="r",

"r"+/d8em/ *++[c]\xybox{
\xymatrix @=1.5pc @*[F-] @*[o] @*+= {
3 \ar[r]^3 & 
1 \ar[ld]^(0.7){3} \ar[d]^1 \\
3 \ar[u]^6 & 
1 \ar[lu]_(0.7){3}
}}="rd",

"rd"+/l8em/ *++[c]\xybox{
\xymatrix @=1.5pc @*[F-] @*[o] @*+= {
3 \ar[d]_3 & 
1 \ar[l]_3 \\
3 \ar[ru]_3 & 
1 \ar[u]_1
}}="d",

"d"+/l8em/ *++[c]\xybox{
\xymatrix @=1.5pc @*[F-] @*[o] @*+= {
3 \ar[r]^3 & 
1 \\
3 \ar[u]^3 & 
1 \ar[u]_1
}}="ld",

"lu"+/d8em/ *++[c]\xybox{
\xymatrix @=1.5pc @*[F-] @*[o] @*+= {
3 &
1 \ar[l]_3 \ar[d]^1 \\
3 \ar[u]^3 & 
1 
}}="l",

\POS "lu" \ar "u"^2
\POS "u" \ar "ru"^1
\POS "ru" \ar "r"^2
\POS "r" \ar "rd"^1
\POS "rd" \ar "d"_2
\POS "d" \ar "ld"_1
\POS "lu" \ar "l"_1
\POS "l" \ar "ld"_2
\end{xy}
}}}
\[
\begin{xy}
(0,0)*=<30pt,10pt>[F**:aliceblue]{}; +/r25pt/*[r]{\text{aliceblue}};
+/d2em/*=<30pt,10pt>[F**:antiquewhite]{}; +/d2em/*[r]{\text{antiquewhite}};
+/d2em/*=<30pt,10pt>[F**:aqua]{}; +/d2em/*[r]{\text{aqua}};
+/d2em/*=<30pt,10pt>[F**:aquamarine]{}; +/d2em/*[r]{\text{aquamarine}};
+/d2em/*=<30pt,10pt>[F**:azure]{}; +/d2em/*[r]{\text{azure}};
+/d2em/*=<30pt,10pt>[F**:beige]{}; +/d2em/*[r]{\text{beige}};
+/d2em/*=<30pt,10pt>[F**:bisque]{}; +/d2em/*[r]{\text{bisque}};
+/d2em/*=<30pt,10pt>[F**:black]{}; +/d2em/*[r]{\text{black}};
+/d2em/*=<30pt,10pt>[F**:blanchedalmond]{}; +/d2em/*[r]{\text{blanchedalmond}};
+/d2em/*=<30pt,10pt>[F**:blue]{}; +/d2em/*[r]{\text{blue}};
+/d2em/*=<30pt,10pt>[F**:blueviolet]{}; +/d2em/*[r]{\text{blueviolet}};
+/d2em/*=<30pt,10pt>[F**:brown]{}; +/d2em/*[r]{\text{brown}};
+/d2em/*=<30pt,10pt>[F**:burlywood]{}; +/d2em/*[r]{\text{burlywood}};
+/d2em/*=<30pt,10pt>[F**:cadetblue]{}; +/d2em/*[r]{\text{cadetblue}};
+/d2em/*=<30pt,10pt>[F**:chartreuse]{}; +/d2em/*[r]{\text{chartreuse}};
+/d2em/*=<30pt,10pt>[F**:chocolate]{}; +/d2em/*[r]{\text{chocolate}};
+/d2em/*=<30pt,10pt>[F**:coral]{}; +/d2em/*[r]{\text{coral}};
+/d2em/*=<30pt,10pt>[F**:cornflowerblue]{}; +/d2em/*[r]{\text{cornflowerblue}};
+/d2em/*=<30pt,10pt>[F**:cornsilk]{}; +/d2em/*[r]{\text{cornsilk}};
+/d2em/*=<30pt,10pt>[F**:crimson]{}; +/d2em/*[r]{\text{crimson}};
+/d2em/*=<30pt,10pt>[F**:cyan]{}; +/d2em/*[r]{\text{cyan}};
+/d2em/*=<30pt,10pt>[F**:darkblue]{}; +/d2em/*[r]{\text{darkblue}};
+/d2em/*=<30pt,10pt>[F**:darkcyan]{}; +/d2em/*[r]{\text{darkcyan}};
+/d2em/*=<30pt,10pt>[F**:darkgoldenrod]{}; +/d2em/*[r]{\text{darkgoldenrod}};
+/d2em/*=<30pt,10pt>[F**:darkgray]{}; +/d2em/*[r]{\text{darkgray}};
+/d2em/*=<30pt,10pt>[F**:darkgreen]{}; +/d2em/*[r]{\text{darkgreen}};
+/d2em/*=<30pt,10pt>[F**:darkgrey]{}; +/d2em/*[r]{\text{darkgrey}};
+/d2em/*=<30pt,10pt>[F**:darkkhaki]{}; +/d2em/*[r]{\text{darkkhaki}};
+/d2em/*=<30pt,10pt>[F**:darkmagenta]{}; +/d2em/*[r]{\text{darkmagenta}};
+/d2em/*=<30pt,10pt>[F**:darkolivegreen]{}; +/d2em/*[r]{\text{darkolivegreen}};
+/d2em/*=<30pt,10pt>[F**:darkorange]{}; +/d2em/*[r]{\text{darkorange}};
+/d2em/*=<30pt,10pt>[F**:darkorchid]{}; +/d2em/*[r]{\text{darkorchid}};
+/d2em/*=<30pt,10pt>[F**:darkred]{}; +/d2em/*[r]{\text{darkred}};
+/d2em/*=<30pt,10pt>[F**:darksalmon]{}; +/d2em/*[r]{\text{darksalmon}};
+/d2em/*=<30pt,10pt>[F**:darkseagreen]{}; +/d2em/*[r]{\text{darkseagreen}};
+/d2em/*=<30pt,10pt>[F**:darkslateblue]{}; +/d2em/*[r]{\text{darkslateblue}};
+/d2em/*=<30pt,10pt>[F**:darkslategray]{}; +/d2em/*[r]{\text{darkslategray}};
+/d2em/*=<30pt,10pt>[F**:darkslategrey]{}; +/d2em/*[r]{\text{darkslategrey}};
+/d2em/*=<30pt,10pt>[F**:darkturquoise]{}; +/d2em/*[r]{\text{darkturquoise}};
+/d2em/*=<30pt,10pt>[F**:darkviolet]{}; +/d2em/*[r]{\text{darkviolet}};
+/d2em/*=<30pt,10pt>[F**:deeppink]{}; +/d2em/*[r]{\text{deeppink}};
+/d2em/*=<30pt,10pt>[F**:deepskyblue]{}; +/d2em/*[r]{\text{deepskyblue}};
+/d2em/*=<30pt,10pt>[F**:dimgray]{}; +/d2em/*[r]{\text{dimgray}};
+/d2em/*=<30pt,10pt>[F**:dimgrey]{}; +/d2em/*[r]{\text{dimgrey}};
+/d2em/*=<30pt,10pt>[F**:dodgerblue]{}; +/d2em/*[r]{\text{dodgerblue}};
+/d2em/*=<30pt,10pt>[F**:firebrick]{}; +/d2em/*[r]{\text{firebrick}};
+/d2em/*=<30pt,10pt>[F**:floralwhite]{}; +/d2em/*[r]{\text{floralwhite}};
+/d2em/*=<30pt,10pt>[F**:forestgreen]{}; +/d2em/*[r]{\text{forestgreen}};
+/d2em/*=<30pt,10pt>[F**:fuchsia]{}; +/d2em/*[r]{\text{fuchsia}};
+/d2em/*=<30pt,10pt>[F**:gainsboro]{}; +/d2em/*[r]{\text{gainsboro}};

<12em,0em>*=<30pt,10pt>[F**:ghostwhite]{}; <12em,0em>+/r25pt/*[r]{\text{ghostwhite}};
+/d2em/*=<30pt,10pt>[F**:gold]{}; +/d2em/*[r]{\text{gold}};
+/d2em/*=<30pt,10pt>[F**:goldenrod]{}; +/d2em/*[r]{\text{goldenrod}};
+/d2em/*=<30pt,10pt>[F**:gray]{}; +/d2em/*[r]{\text{gray}};
+/d2em/*=<30pt,10pt>[F**:grey]{}; +/d2em/*[r]{\text{grey}};
+/d2em/*=<30pt,10pt>[F**:green]{}; +/d2em/*[r]{\text{green}};
+/d2em/*=<30pt,10pt>[F**:greenyellow]{}; +/d2em/*[r]{\text{greenyellow}};
+/d2em/*=<30pt,10pt>[F**:honeydew]{}; +/d2em/*[r]{\text{honeydew}};
+/d2em/*=<30pt,10pt>[F**:hotpink]{}; +/d2em/*[r]{\text{hotpink}};
+/d2em/*=<30pt,10pt>[F**:indianred]{}; +/d2em/*[r]{\text{indianred}};
+/d2em/*=<30pt,10pt>[F**:indigo]{}; +/d2em/*[r]{\text{indigo}};
+/d2em/*=<30pt,10pt>[F**:ivory]{}; +/d2em/*[r]{\text{ivory}};
+/d2em/*=<30pt,10pt>[F**:khaki]{}; +/d2em/*[r]{\text{khaki}};
+/d2em/*=<30pt,10pt>[F**:lavender]{}; +/d2em/*[r]{\text{lavender}};
+/d2em/*=<30pt,10pt>[F**:lavenderblush]{}; +/d2em/*[r]{\text{lavenderblush}};
+/d2em/*=<30pt,10pt>[F**:lawngreen]{}; +/d2em/*[r]{\text{lawngreen}};
+/d2em/*=<30pt,10pt>[F**:lemonchiffon]{}; +/d2em/*[r]{\text{lemonchiffon}};
+/d2em/*=<30pt,10pt>[F**:lightblue]{}; +/d2em/*[r]{\text{lightblue}};
+/d2em/*=<30pt,10pt>[F**:lightcoral]{}; +/d2em/*[r]{\text{lightcoral}};
+/d2em/*=<30pt,10pt>[F**:lightcyan]{}; +/d2em/*[r]{\text{lightcyan}};
+/d2em/*=<30pt,10pt>[F**:lightgoldenrodyellow]{}; +/d2em/*[r]{\text{lightgoldenrodyellow}};
+/d2em/*=<30pt,10pt>[F**:lightgray]{}; +/d2em/*[r]{\text{lightgray}};
+/d2em/*=<30pt,10pt>[F**:lightgreen]{}; +/d2em/*[r]{\text{lightgreen}};
+/d2em/*=<30pt,10pt>[F**:lightgrey]{}; +/d2em/*[r]{\text{lightgrey}};
+/d2em/*=<30pt,10pt>[F**:lightpink]{}; +/d2em/*[r]{\text{lightpink}};
+/d2em/*=<30pt,10pt>[F**:lightsalmon]{}; +/d2em/*[r]{\text{lightsalmon}};
+/d2em/*=<30pt,10pt>[F**:lightseagreen]{}; +/d2em/*[r]{\text{lightseagreen}};
+/d2em/*=<30pt,10pt>[F**:lightskyblue]{}; +/d2em/*[r]{\text{lightskyblue}};
+/d2em/*=<30pt,10pt>[F**:lightslategray]{}; +/d2em/*[r]{\text{lightslategray}};
+/d2em/*=<30pt,10pt>[F**:lightslategrey]{}; +/d2em/*[r]{\text{lightslategrey}};
+/d2em/*=<30pt,10pt>[F**:lightsteelblue]{}; +/d2em/*[r]{\text{lightsteelblue}};
+/d2em/*=<30pt,10pt>[F**:lightyellow]{}; +/d2em/*[r]{\text{lightyellow}};
+/d2em/*=<30pt,10pt>[F**:lime]{}; +/d2em/*[r]{\text{lime}};
+/d2em/*=<30pt,10pt>[F**:limegreen]{}; +/d2em/*[r]{\text{limegreen}};
+/d2em/*=<30pt,10pt>[F**:linen]{}; +/d2em/*[r]{\text{linen}};
+/d2em/*=<30pt,10pt>[F**:magenta]{}; +/d2em/*[r]{\text{magenta}};
+/d2em/*=<30pt,10pt>[F**:maroon]{}; +/d2em/*[r]{\text{maroon}};
+/d2em/*=<30pt,10pt>[F**:mediumaquamarine]{}; +/d2em/*[r]{\text{mediumaquamarine}};
+/d2em/*=<30pt,10pt>[F**:mediumblue]{}; +/d2em/*[r]{\text{mediumblue}};
+/d2em/*=<30pt,10pt>[F**:mediumorchid]{}; +/d2em/*[r]{\text{mediumorchid}};
+/d2em/*=<30pt,10pt>[F**:mediumpurple]{}; +/d2em/*[r]{\text{mediumpurple}};
+/d2em/*=<30pt,10pt>[F**:mediumseagreen]{}; +/d2em/*[r]{\text{mediumseagreen}};
+/d2em/*=<30pt,10pt>[F**:mediumslateblue]{}; +/d2em/*[r]{\text{mediumslateblue}};
+/d2em/*=<30pt,10pt>[F**:mediumspringgreen]{}; +/d2em/*[r]{\text{mediumspringgreen}};
+/d2em/*=<30pt,10pt>[F**:mediumturquoise]{}; +/d2em/*[r]{\text{mediumturquoise}};
+/d2em/*=<30pt,10pt>[F**:mediumvioletred]{}; +/d2em/*[r]{\text{mediumvioletred}};
+/d2em/*=<30pt,10pt>[F**:midnightblue]{}; +/d2em/*[r]{\text{midnightblue}};
+/d2em/*=<30pt,10pt>[F**:mintcream]{}; +/d2em/*[r]{\text{mintcream}};
+/d2em/*=<30pt,10pt>[F**:mistyrose]{}; +/d2em/*[r]{\text{mistyrose}};
+/d2em/*=<30pt,10pt>[F**:moccasin]{}; +/d2em/*[r]{\text{moccasin}};

<24em,0em>*=<30pt,10pt>[F**:navajowhite]{}; <24em,0em>+/r25pt/*[r]{\text{navajowhite}};
+/d2em/*=<30pt,10pt>[F**:navy]{}; +/d2em/*[r]{\text{navy}};
+/d2em/*=<30pt,10pt>[F**:oldlace]{}; +/d2em/*[r]{\text{oldlace}};
+/d2em/*=<30pt,10pt>[F**:olive]{}; +/d2em/*[r]{\text{olive}};
+/d2em/*=<30pt,10pt>[F**:olivedrab]{}; +/d2em/*[r]{\text{olivedrab}};
+/d2em/*=<30pt,10pt>[F**:orange]{}; +/d2em/*[r]{\text{orange}};
+/d2em/*=<30pt,10pt>[F**:orangered]{}; +/d2em/*[r]{\text{orangered}};
+/d2em/*=<30pt,10pt>[F**:orchid]{}; +/d2em/*[r]{\text{orchid}};
+/d2em/*=<30pt,10pt>[F**:palegoldenrod]{}; +/d2em/*[r]{\text{palegoldenrod}};
+/d2em/*=<30pt,10pt>[F**:palegreen]{}; +/d2em/*[r]{\text{palegreen}};
+/d2em/*=<30pt,10pt>[F**:paleturquoise]{}; +/d2em/*[r]{\text{paleturquoise}};
+/d2em/*=<30pt,10pt>[F**:palevioletred]{}; +/d2em/*[r]{\text{palevioletred}};
+/d2em/*=<30pt,10pt>[F**:papayawhip]{}; +/d2em/*[r]{\text{papayawhip}};
+/d2em/*=<30pt,10pt>[F**:peachpuff]{}; +/d2em/*[r]{\text{peachpuff}};
+/d2em/*=<30pt,10pt>[F**:peru]{}; +/d2em/*[r]{\text{peru}};
+/d2em/*=<30pt,10pt>[F**:pink]{}; +/d2em/*[r]{\text{pink}};
+/d2em/*=<30pt,10pt>[F**:plum]{}; +/d2em/*[r]{\text{plum}};
+/d2em/*=<30pt,10pt>[F**:powderblue]{}; +/d2em/*[r]{\text{powderblue}};
+/d2em/*=<30pt,10pt>[F**:purple]{}; +/d2em/*[r]{\text{purple}};
+/d2em/*=<30pt,10pt>[F**:red]{}; +/d2em/*[r]{\text{red}};
+/d2em/*=<30pt,10pt>[F**:rosybrown]{}; +/d2em/*[r]{\text{rosybrown}};
+/d2em/*=<30pt,10pt>[F**:royalblue]{}; +/d2em/*[r]{\text{royalblue}};
+/d2em/*=<30pt,10pt>[F**:saddlebrown]{}; +/d2em/*[r]{\text{saddlebrown}};
+/d2em/*=<30pt,10pt>[F**:salmon]{}; +/d2em/*[r]{\text{salmon}};
+/d2em/*=<30pt,10pt>[F**:sandybrown]{}; +/d2em/*[r]{\text{sandybrown}};
+/d2em/*=<30pt,10pt>[F**:seagreen]{}; +/d2em/*[r]{\text{seagreen}};
+/d2em/*=<30pt,10pt>[F**:seashell]{}; +/d2em/*[r]{\text{seashell}};
+/d2em/*=<30pt,10pt>[F**:sienna]{}; +/d2em/*[r]{\text{sienna}};
+/d2em/*=<30pt,10pt>[F**:silver]{}; +/d2em/*[r]{\text{silver}};
+/d2em/*=<30pt,10pt>[F**:skyblue]{}; +/d2em/*[r]{\text{skyblue}};
+/d2em/*=<30pt,10pt>[F**:slateblue]{}; +/d2em/*[r]{\text{slateblue}};
+/d2em/*=<30pt,10pt>[F**:slategray]{}; +/d2em/*[r]{\text{slategray}};
+/d2em/*=<30pt,10pt>[F**:slategrey]{}; +/d2em/*[r]{\text{slategrey}};
+/d2em/*=<30pt,10pt>[F**:snow]{}; +/d2em/*[r]{\text{snow}};
+/d2em/*=<30pt,10pt>[F**:springgreen]{}; +/d2em/*[r]{\text{springgreen}};
+/d2em/*=<30pt,10pt>[F**:steelblue]{}; +/d2em/*[r]{\text{steelblue}};
+/d2em/*=<30pt,10pt>[F**:tan]{}; +/d2em/*[r]{\text{tan}};
+/d2em/*=<30pt,10pt>[F**:teal]{}; +/d2em/*[r]{\text{teal}};
+/d2em/*=<30pt,10pt>[F**:thistle]{}; +/d2em/*[r]{\text{thistle}};
+/d2em/*=<30pt,10pt>[F**:tomato]{}; +/d2em/*[r]{\text{tomato}};
+/d2em/*=<30pt,10pt>[F**:turquoise]{}; +/d2em/*[r]{\text{turquoise}};
+/d2em/*=<30pt,10pt>[F**:violet]{}; +/d2em/*[r]{\text{violet}};
+/d2em/*=<30pt,10pt>[F**:wheat]{}; +/d2em/*[r]{\text{wheat}};
+/d2em/*=<30pt,10pt>[F**:white]{}; +/d2em/*[r]{\text{white}};
+/d2em/*=<30pt,10pt>[F**:whitesmoke]{}; +/d2em/*[r]{\text{whitesmoke}};
+/d2em/*=<30pt,10pt>[F**:yellow]{}; +/d2em/*[r]{\text{yellow}};
+/d2em/*=<30pt,10pt>[F**:yellowgreen]{}; +/d2em/*[r]{\text{yellowgreen}};
\end{xy}
\]

Source code:
{{{
\begin{xy}
(0,0)*=<30pt,10pt>[F**:aliceblue]{}; +/r25pt/*[r]{\text{aliceblue}};
+/d2em/*=<30pt,10pt>[F**:antiquewhite]{}; +/d2em/*[r]{\text{antiquewhite}};
+/d2em/*=<30pt,10pt>[F**:aqua]{}; +/d2em/*[r]{\text{aqua}};
+/d2em/*=<30pt,10pt>[F**:aquamarine]{}; +/d2em/*[r]{\text{aquamarine}};
+/d2em/*=<30pt,10pt>[F**:azure]{}; +/d2em/*[r]{\text{azure}};
+/d2em/*=<30pt,10pt>[F**:beige]{}; +/d2em/*[r]{\text{beige}};
+/d2em/*=<30pt,10pt>[F**:bisque]{}; +/d2em/*[r]{\text{bisque}};
+/d2em/*=<30pt,10pt>[F**:black]{}; +/d2em/*[r]{\text{black}};
+/d2em/*=<30pt,10pt>[F**:blanchedalmond]{}; +/d2em/*[r]{\text{blanchedalmond}};
+/d2em/*=<30pt,10pt>[F**:blue]{}; +/d2em/*[r]{\text{blue}};
+/d2em/*=<30pt,10pt>[F**:blueviolet]{}; +/d2em/*[r]{\text{blueviolet}};
+/d2em/*=<30pt,10pt>[F**:brown]{}; +/d2em/*[r]{\text{brown}};
+/d2em/*=<30pt,10pt>[F**:burlywood]{}; +/d2em/*[r]{\text{burlywood}};
+/d2em/*=<30pt,10pt>[F**:cadetblue]{}; +/d2em/*[r]{\text{cadetblue}};
+/d2em/*=<30pt,10pt>[F**:chartreuse]{}; +/d2em/*[r]{\text{chartreuse}};
+/d2em/*=<30pt,10pt>[F**:chocolate]{}; +/d2em/*[r]{\text{chocolate}};
+/d2em/*=<30pt,10pt>[F**:coral]{}; +/d2em/*[r]{\text{coral}};
+/d2em/*=<30pt,10pt>[F**:cornflowerblue]{}; +/d2em/*[r]{\text{cornflowerblue}};
+/d2em/*=<30pt,10pt>[F**:cornsilk]{}; +/d2em/*[r]{\text{cornsilk}};
+/d2em/*=<30pt,10pt>[F**:crimson]{}; +/d2em/*[r]{\text{crimson}};
+/d2em/*=<30pt,10pt>[F**:cyan]{}; +/d2em/*[r]{\text{cyan}};
+/d2em/*=<30pt,10pt>[F**:darkblue]{}; +/d2em/*[r]{\text{darkblue}};
+/d2em/*=<30pt,10pt>[F**:darkcyan]{}; +/d2em/*[r]{\text{darkcyan}};
+/d2em/*=<30pt,10pt>[F**:darkgoldenrod]{}; +/d2em/*[r]{\text{darkgoldenrod}};
+/d2em/*=<30pt,10pt>[F**:darkgray]{}; +/d2em/*[r]{\text{darkgray}};
+/d2em/*=<30pt,10pt>[F**:darkgreen]{}; +/d2em/*[r]{\text{darkgreen}};
+/d2em/*=<30pt,10pt>[F**:darkgrey]{}; +/d2em/*[r]{\text{darkgrey}};
+/d2em/*=<30pt,10pt>[F**:darkkhaki]{}; +/d2em/*[r]{\text{darkkhaki}};
+/d2em/*=<30pt,10pt>[F**:darkmagenta]{}; +/d2em/*[r]{\text{darkmagenta}};
+/d2em/*=<30pt,10pt>[F**:darkolivegreen]{}; +/d2em/*[r]{\text{darkolivegreen}};
+/d2em/*=<30pt,10pt>[F**:darkorange]{}; +/d2em/*[r]{\text{darkorange}};
+/d2em/*=<30pt,10pt>[F**:darkorchid]{}; +/d2em/*[r]{\text{darkorchid}};
+/d2em/*=<30pt,10pt>[F**:darkred]{}; +/d2em/*[r]{\text{darkred}};
+/d2em/*=<30pt,10pt>[F**:darksalmon]{}; +/d2em/*[r]{\text{darksalmon}};
+/d2em/*=<30pt,10pt>[F**:darkseagreen]{}; +/d2em/*[r]{\text{darkseagreen}};
+/d2em/*=<30pt,10pt>[F**:darkslateblue]{}; +/d2em/*[r]{\text{darkslateblue}};
+/d2em/*=<30pt,10pt>[F**:darkslategray]{}; +/d2em/*[r]{\text{darkslategray}};
+/d2em/*=<30pt,10pt>[F**:darkslategrey]{}; +/d2em/*[r]{\text{darkslategrey}};
+/d2em/*=<30pt,10pt>[F**:darkturquoise]{}; +/d2em/*[r]{\text{darkturquoise}};
+/d2em/*=<30pt,10pt>[F**:darkviolet]{}; +/d2em/*[r]{\text{darkviolet}};
+/d2em/*=<30pt,10pt>[F**:deeppink]{}; +/d2em/*[r]{\text{deeppink}};
+/d2em/*=<30pt,10pt>[F**:deepskyblue]{}; +/d2em/*[r]{\text{deepskyblue}};
+/d2em/*=<30pt,10pt>[F**:dimgray]{}; +/d2em/*[r]{\text{dimgray}};
+/d2em/*=<30pt,10pt>[F**:dimgrey]{}; +/d2em/*[r]{\text{dimgrey}};
+/d2em/*=<30pt,10pt>[F**:dodgerblue]{}; +/d2em/*[r]{\text{dodgerblue}};
+/d2em/*=<30pt,10pt>[F**:firebrick]{}; +/d2em/*[r]{\text{firebrick}};
+/d2em/*=<30pt,10pt>[F**:floralwhite]{}; +/d2em/*[r]{\text{floralwhite}};
+/d2em/*=<30pt,10pt>[F**:forestgreen]{}; +/d2em/*[r]{\text{forestgreen}};
+/d2em/*=<30pt,10pt>[F**:fuchsia]{}; +/d2em/*[r]{\text{fuchsia}};
+/d2em/*=<30pt,10pt>[F**:gainsboro]{}; +/d2em/*[r]{\text{gainsboro}};

<12em,0em>*=<30pt,10pt>[F**:ghostwhite]{}; <12em,0em>+/r25pt/*[r]{\text{ghostwhite}};
+/d2em/*=<30pt,10pt>[F**:gold]{}; +/d2em/*[r]{\text{gold}};
+/d2em/*=<30pt,10pt>[F**:goldenrod]{}; +/d2em/*[r]{\text{goldenrod}};
+/d2em/*=<30pt,10pt>[F**:gray]{}; +/d2em/*[r]{\text{gray}};
+/d2em/*=<30pt,10pt>[F**:grey]{}; +/d2em/*[r]{\text{grey}};
+/d2em/*=<30pt,10pt>[F**:green]{}; +/d2em/*[r]{\text{green}};
+/d2em/*=<30pt,10pt>[F**:greenyellow]{}; +/d2em/*[r]{\text{greenyellow}};
+/d2em/*=<30pt,10pt>[F**:honeydew]{}; +/d2em/*[r]{\text{honeydew}};
+/d2em/*=<30pt,10pt>[F**:hotpink]{}; +/d2em/*[r]{\text{hotpink}};
+/d2em/*=<30pt,10pt>[F**:indianred]{}; +/d2em/*[r]{\text{indianred}};
+/d2em/*=<30pt,10pt>[F**:indigo]{}; +/d2em/*[r]{\text{indigo}};
+/d2em/*=<30pt,10pt>[F**:ivory]{}; +/d2em/*[r]{\text{ivory}};
+/d2em/*=<30pt,10pt>[F**:khaki]{}; +/d2em/*[r]{\text{khaki}};
+/d2em/*=<30pt,10pt>[F**:lavender]{}; +/d2em/*[r]{\text{lavender}};
+/d2em/*=<30pt,10pt>[F**:lavenderblush]{}; +/d2em/*[r]{\text{lavenderblush}};
+/d2em/*=<30pt,10pt>[F**:lawngreen]{}; +/d2em/*[r]{\text{lawngreen}};
+/d2em/*=<30pt,10pt>[F**:lemonchiffon]{}; +/d2em/*[r]{\text{lemonchiffon}};
+/d2em/*=<30pt,10pt>[F**:lightblue]{}; +/d2em/*[r]{\text{lightblue}};
+/d2em/*=<30pt,10pt>[F**:lightcoral]{}; +/d2em/*[r]{\text{lightcoral}};
+/d2em/*=<30pt,10pt>[F**:lightcyan]{}; +/d2em/*[r]{\text{lightcyan}};
+/d2em/*=<30pt,10pt>[F**:lightgoldenrodyellow]{}; +/d2em/*[r]{\text{lightgoldenrodyellow}};
+/d2em/*=<30pt,10pt>[F**:lightgray]{}; +/d2em/*[r]{\text{lightgray}};
+/d2em/*=<30pt,10pt>[F**:lightgreen]{}; +/d2em/*[r]{\text{lightgreen}};
+/d2em/*=<30pt,10pt>[F**:lightgrey]{}; +/d2em/*[r]{\text{lightgrey}};
+/d2em/*=<30pt,10pt>[F**:lightpink]{}; +/d2em/*[r]{\text{lightpink}};
+/d2em/*=<30pt,10pt>[F**:lightsalmon]{}; +/d2em/*[r]{\text{lightsalmon}};
+/d2em/*=<30pt,10pt>[F**:lightseagreen]{}; +/d2em/*[r]{\text{lightseagreen}};
+/d2em/*=<30pt,10pt>[F**:lightskyblue]{}; +/d2em/*[r]{\text{lightskyblue}};
+/d2em/*=<30pt,10pt>[F**:lightslategray]{}; +/d2em/*[r]{\text{lightslategray}};
+/d2em/*=<30pt,10pt>[F**:lightslategrey]{}; +/d2em/*[r]{\text{lightslategrey}};
+/d2em/*=<30pt,10pt>[F**:lightsteelblue]{}; +/d2em/*[r]{\text{lightsteelblue}};
+/d2em/*=<30pt,10pt>[F**:lightyellow]{}; +/d2em/*[r]{\text{lightyellow}};
+/d2em/*=<30pt,10pt>[F**:lime]{}; +/d2em/*[r]{\text{lime}};
+/d2em/*=<30pt,10pt>[F**:limegreen]{}; +/d2em/*[r]{\text{limegreen}};
+/d2em/*=<30pt,10pt>[F**:linen]{}; +/d2em/*[r]{\text{linen}};
+/d2em/*=<30pt,10pt>[F**:magenta]{}; +/d2em/*[r]{\text{magenta}};
+/d2em/*=<30pt,10pt>[F**:maroon]{}; +/d2em/*[r]{\text{maroon}};
+/d2em/*=<30pt,10pt>[F**:mediumaquamarine]{}; +/d2em/*[r]{\text{mediumaquamarine}};
+/d2em/*=<30pt,10pt>[F**:mediumblue]{}; +/d2em/*[r]{\text{mediumblue}};
+/d2em/*=<30pt,10pt>[F**:mediumorchid]{}; +/d2em/*[r]{\text{mediumorchid}};
+/d2em/*=<30pt,10pt>[F**:mediumpurple]{}; +/d2em/*[r]{\text{mediumpurple}};
+/d2em/*=<30pt,10pt>[F**:mediumseagreen]{}; +/d2em/*[r]{\text{mediumseagreen}};
+/d2em/*=<30pt,10pt>[F**:mediumslateblue]{}; +/d2em/*[r]{\text{mediumslateblue}};
+/d2em/*=<30pt,10pt>[F**:mediumspringgreen]{}; +/d2em/*[r]{\text{mediumspringgreen}};
+/d2em/*=<30pt,10pt>[F**:mediumturquoise]{}; +/d2em/*[r]{\text{mediumturquoise}};
+/d2em/*=<30pt,10pt>[F**:mediumvioletred]{}; +/d2em/*[r]{\text{mediumvioletred}};
+/d2em/*=<30pt,10pt>[F**:midnightblue]{}; +/d2em/*[r]{\text{midnightblue}};
+/d2em/*=<30pt,10pt>[F**:mintcream]{}; +/d2em/*[r]{\text{mintcream}};
+/d2em/*=<30pt,10pt>[F**:mistyrose]{}; +/d2em/*[r]{\text{mistyrose}};
+/d2em/*=<30pt,10pt>[F**:moccasin]{}; +/d2em/*[r]{\text{moccasin}};

<24em,0em>*=<30pt,10pt>[F**:navajowhite]{}; <24em,0em>+/r25pt/*[r]{\text{navajowhite}};
+/d2em/*=<30pt,10pt>[F**:navy]{}; +/d2em/*[r]{\text{navy}};
+/d2em/*=<30pt,10pt>[F**:oldlace]{}; +/d2em/*[r]{\text{oldlace}};
+/d2em/*=<30pt,10pt>[F**:olive]{}; +/d2em/*[r]{\text{olive}};
+/d2em/*=<30pt,10pt>[F**:olivedrab]{}; +/d2em/*[r]{\text{olivedrab}};
+/d2em/*=<30pt,10pt>[F**:orange]{}; +/d2em/*[r]{\text{orange}};
+/d2em/*=<30pt,10pt>[F**:orangered]{}; +/d2em/*[r]{\text{orangered}};
+/d2em/*=<30pt,10pt>[F**:orchid]{}; +/d2em/*[r]{\text{orchid}};
+/d2em/*=<30pt,10pt>[F**:palegoldenrod]{}; +/d2em/*[r]{\text{palegoldenrod}};
+/d2em/*=<30pt,10pt>[F**:palegreen]{}; +/d2em/*[r]{\text{palegreen}};
+/d2em/*=<30pt,10pt>[F**:paleturquoise]{}; +/d2em/*[r]{\text{paleturquoise}};
+/d2em/*=<30pt,10pt>[F**:palevioletred]{}; +/d2em/*[r]{\text{palevioletred}};
+/d2em/*=<30pt,10pt>[F**:papayawhip]{}; +/d2em/*[r]{\text{papayawhip}};
+/d2em/*=<30pt,10pt>[F**:peachpuff]{}; +/d2em/*[r]{\text{peachpuff}};
+/d2em/*=<30pt,10pt>[F**:peru]{}; +/d2em/*[r]{\text{peru}};
+/d2em/*=<30pt,10pt>[F**:pink]{}; +/d2em/*[r]{\text{pink}};
+/d2em/*=<30pt,10pt>[F**:plum]{}; +/d2em/*[r]{\text{plum}};
+/d2em/*=<30pt,10pt>[F**:powderblue]{}; +/d2em/*[r]{\text{powderblue}};
+/d2em/*=<30pt,10pt>[F**:purple]{}; +/d2em/*[r]{\text{purple}};
+/d2em/*=<30pt,10pt>[F**:red]{}; +/d2em/*[r]{\text{red}};
+/d2em/*=<30pt,10pt>[F**:rosybrown]{}; +/d2em/*[r]{\text{rosybrown}};
+/d2em/*=<30pt,10pt>[F**:royalblue]{}; +/d2em/*[r]{\text{royalblue}};
+/d2em/*=<30pt,10pt>[F**:saddlebrown]{}; +/d2em/*[r]{\text{saddlebrown}};
+/d2em/*=<30pt,10pt>[F**:salmon]{}; +/d2em/*[r]{\text{salmon}};
+/d2em/*=<30pt,10pt>[F**:sandybrown]{}; +/d2em/*[r]{\text{sandybrown}};
+/d2em/*=<30pt,10pt>[F**:seagreen]{}; +/d2em/*[r]{\text{seagreen}};
+/d2em/*=<30pt,10pt>[F**:seashell]{}; +/d2em/*[r]{\text{seashell}};
+/d2em/*=<30pt,10pt>[F**:sienna]{}; +/d2em/*[r]{\text{sienna}};
+/d2em/*=<30pt,10pt>[F**:silver]{}; +/d2em/*[r]{\text{silver}};
+/d2em/*=<30pt,10pt>[F**:skyblue]{}; +/d2em/*[r]{\text{skyblue}};
+/d2em/*=<30pt,10pt>[F**:slateblue]{}; +/d2em/*[r]{\text{slateblue}};
+/d2em/*=<30pt,10pt>[F**:slategray]{}; +/d2em/*[r]{\text{slategray}};
+/d2em/*=<30pt,10pt>[F**:slategrey]{}; +/d2em/*[r]{\text{slategrey}};
+/d2em/*=<30pt,10pt>[F**:snow]{}; +/d2em/*[r]{\text{snow}};
+/d2em/*=<30pt,10pt>[F**:springgreen]{}; +/d2em/*[r]{\text{springgreen}};
+/d2em/*=<30pt,10pt>[F**:steelblue]{}; +/d2em/*[r]{\text{steelblue}};
+/d2em/*=<30pt,10pt>[F**:tan]{}; +/d2em/*[r]{\text{tan}};
+/d2em/*=<30pt,10pt>[F**:teal]{}; +/d2em/*[r]{\text{teal}};
+/d2em/*=<30pt,10pt>[F**:thistle]{}; +/d2em/*[r]{\text{thistle}};
+/d2em/*=<30pt,10pt>[F**:tomato]{}; +/d2em/*[r]{\text{tomato}};
+/d2em/*=<30pt,10pt>[F**:turquoise]{}; +/d2em/*[r]{\text{turquoise}};
+/d2em/*=<30pt,10pt>[F**:violet]{}; +/d2em/*[r]{\text{violet}};
+/d2em/*=<30pt,10pt>[F**:wheat]{}; +/d2em/*[r]{\text{wheat}};
+/d2em/*=<30pt,10pt>[F**:white]{}; +/d2em/*[r]{\text{white}};
+/d2em/*=<30pt,10pt>[F**:whitesmoke]{}; +/d2em/*[r]{\text{whitesmoke}};
+/d2em/*=<30pt,10pt>[F**:yellow]{}; +/d2em/*[r]{\text{yellow}};
+/d2em/*=<30pt,10pt>[F**:yellowgreen]{}; +/d2em/*[r]{\text{yellowgreen}};
\end{xy}
}}}
<<list filter "[tag[Sample]]">>
= Xy-pic extension for MathJax
XyJax
body {font-size:0.9em; font-family:arial,helvetica; margin:0; padding:0;}
/*{{{*/
* html .tiddler {height:1%;}

body {font-size:0.75em; font-family:arial,helvetica; margin:0; padding:0;}

h1,h2,h3,h4,h5,h6 {font-weight:bold; text-decoration:none;}
h1,h2,h3 {padding-bottom:1px; margin-top:1.2em;margin-bottom:0.3em;}
h4,h5,h6 {margin-top:1em;}
h1 {font-size:1.35em;}
h2 {font-size:1.25em;}
h3 {font-size:1.1em;}
h4 {font-size:1em;}
h5 {font-size:.9em;}

hr {height:1px;}

a {text-decoration:none;}

dt {font-weight:bold;}

ol {list-style-type:decimal;}
ol ol {list-style-type:lower-alpha;}
ol ol ol {list-style-type:lower-roman;}
ol ol ol ol {list-style-type:decimal;}
ol ol ol ol ol {list-style-type:lower-alpha;}
ol ol ol ol ol ol {list-style-type:lower-roman;}
ol ol ol ol ol ol ol {list-style-type:decimal;}

.txtOptionInput {width:11em;}

#contentWrapper .chkOptionInput {border:0;}

.externalLink {text-decoration:underline;}

.indent {margin-left:3em;}
.outdent {margin-left:3em; text-indent:-3em;}
code.escaped {white-space:nowrap;}

.tiddlyLinkExisting {font-weight:bold;}
.tiddlyLinkNonExisting {font-style:italic;}

/* the 'a' is required for IE, otherwise it renders the whole tiddler in bold */
a.tiddlyLinkNonExisting.shadow {font-weight:bold;}

#mainMenu .tiddlyLinkExisting,
	#mainMenu .tiddlyLinkNonExisting,
	#sidebarTabs .tiddlyLinkNonExisting {font-weight:normal; font-style:normal;}
#sidebarTabs .tiddlyLinkExisting {font-weight:bold; font-style:normal;}

.header {position:relative;}
.header a:hover {background:transparent;}
.headerShadow {position:relative; padding:4.5em 0 1em 1em; left:-1px; top:-1px;}
.headerForeground {position:absolute; padding:4.5em 0 1em 1em; left:0px; top:0px;}

.siteTitle {font-size:3em;}
.siteSubtitle {font-size:1.2em;}

#mainMenu {position:absolute; left:0; width:10em; text-align:right; line-height:1.6em; padding:1.5em 0.5em 0.5em 0.5em; font-size:1.1em;}

#sidebar {position:absolute; right:3px; width:16em; font-size:.9em;}
#sidebarOptions {padding-top:0.3em;}
#sidebarOptions a {margin:0 0.2em; padding:0.2em 0.3em; display:block;}
#sidebarOptions input {margin:0.4em 0.5em;}
#sidebarOptions .sliderPanel {margin-left:1em; padding:0.5em; font-size:.85em;}
#sidebarOptions .sliderPanel a {font-weight:bold; display:inline; padding:0;}
#sidebarOptions .sliderPanel input {margin:0 0 0.3em 0;}
#sidebarTabs .tabContents {width:15em; overflow:hidden;}

.wizard {padding:0.1em 1em 0 2em;}
.wizard h1 {font-size:2em; font-weight:bold; background:none; padding:0; margin:0.4em 0 0.2em;}
.wizard h2 {font-size:1.2em; font-weight:bold; background:none; padding:0; margin:0.4em 0 0.2em;}
.wizardStep {padding:1em 1em 1em 1em;}
.wizard .button {margin:0.5em 0 0; font-size:1.2em;}
.wizardFooter {padding:0.8em 0.4em 0.8em 0;}
.wizardFooter .status {padding:0 0.4em; margin-left:1em;}
.wizard .button {padding:0.1em 0.2em;}

#messageArea {position:fixed; top:2em; right:0; margin:0.5em; padding:0.5em; z-index:2000; _position:absolute;}
.messageToolbar {display:block; text-align:right; padding:0.2em;}
#messageArea a {text-decoration:underline;}

.tiddlerPopupButton {padding:0.2em;}
.popupTiddler {position: absolute; z-index:300; padding:1em; margin:0;}

.popup {position:absolute; z-index:300; font-size:.9em; padding:0; list-style:none; margin:0;}
.popup .popupMessage {padding:0.4em;}
.popup hr {display:block; height:1px; width:auto; padding:0; margin:0.2em 0;}
.popup li.disabled {padding:0.4em;}
.popup li a {display:block; padding:0.4em; font-weight:normal; cursor:pointer;}
.listBreak {font-size:1px; line-height:1px;}
.listBreak div {margin:2px 0;}

.tabset {padding:1em 0 0 0.5em;}
.tab {margin:0 0 0 0.25em; padding:2px;}
.tabContents {padding:0.5em;}
.tabContents ul, .tabContents ol {margin:0; padding:0;}
.txtMainTab .tabContents li {list-style:none;}
.tabContents li.listLink { margin-left:.75em;}

#contentWrapper {display:block;}
#splashScreen {display:none;}

#displayArea {margin:1em 17em 0 14em;}

.toolbar {text-align:right; font-size:.9em;}

.tiddler {padding:1em 1em 0;}

.missing .viewer,.missing .title {font-style:italic;}

.title {font-size:1.6em; font-weight:bold;}

.missing .subtitle {display:none;}
.subtitle {font-size:1.1em;}

.tiddler .button {padding:0.2em 0.4em;}

.tagging {margin:0.5em 0.5em 0.5em 0; float:left; display:none;}
.isTag .tagging {display:block;}
.tagged {margin:0.5em; float:right;}
.tagging, .tagged {font-size:0.9em; padding:0.25em;}
.tagging ul, .tagged ul {list-style:none; margin:0.25em; padding:0;}
.tagClear {clear:both;}

.footer {font-size:.9em;}
.footer li {display:inline;}

.annotation {padding:0.5em; margin:0.5em;}

* html .viewer pre {width:99%; padding:0 0 1em 0;}
.viewer {line-height:1.4em; padding-top:0.5em;}
.viewer .button {margin:0 0.25em; padding:0 0.25em;}
.viewer blockquote {line-height:1.5em; padding-left:0.8em;margin-left:2.5em;}
.viewer ul, .viewer ol {margin-left:0.5em; padding-left:1.5em;}

.viewer table, table.twtable {border-collapse:collapse; margin:0.8em 1.0em;}
.viewer th, .viewer td, .viewer tr,.viewer caption,.twtable th, .twtable td, .twtable tr,.twtable caption {padding:3px;}
table.listView {font-size:0.85em; margin:0.8em 1.0em;}
table.listView th, table.listView td, table.listView tr {padding:0px 3px 0px 3px;}

.viewer pre {padding:0.5em; margin-left:0.5em; font-size:1.2em; line-height:1.4em; overflow:auto;}
.viewer code {font-size:1.2em; line-height:1.4em;}

.editor {font-size:1.1em;}
.editor input, .editor textarea {display:block; width:100%; font:inherit;}
.editorFooter {padding:0.25em 0; font-size:.9em;}
.editorFooter .button {padding-top:0px; padding-bottom:0px;}

.fieldsetFix {border:0; padding:0; margin:1px 0px;}

.sparkline {line-height:1em;}
.sparktick {outline:0;}

.zoomer {font-size:1.1em; position:absolute; overflow:hidden;}
.zoomer div {padding:1em;}

* html #backstage {width:99%;}
* html #backstageArea {width:99%;}
#backstageArea {display:none; position:relative; overflow: hidden; z-index:150; padding:0.3em 0.5em;}
#backstageToolbar {position:relative;}
#backstageArea a {font-weight:bold; margin-left:0.5em; padding:0.3em 0.5em;}
#backstageButton {display:none; position:absolute; z-index:175; top:0; right:0;}
#backstageButton a {padding:0.1em 0.4em; margin:0.1em;}
#backstage {position:relative; width:100%; z-index:50;}
#backstagePanel {display:none; z-index:100; position:absolute; width:90%; margin-left:3em; padding:1em;}
.backstagePanelFooter {padding-top:0.2em; float:right;}
.backstagePanelFooter a {padding:0.2em 0.4em;}
#backstageCloak {display:none; z-index:20; position:absolute; width:100%; height:100px;}

.whenBackstage {display:none;}
.backstageVisible .whenBackstage {display:block;}
/*}}}*/
* general
** --design Xy-pic domain model-- (@@done@@)
** --support HTML-CSS Output Jax.-- (@@done@@)
** --support SVG Output Jax (MathJax 2.1 or later required).-- (@@done@@)
** --support comments.-- (@@done@@)
** support user-defined macros.

* Implement the kernel (@@almost done@@)
** --Positions-- (@@done@@)
** Objects (@@almost done@@)
*** TODO: implements Hidden object modifier.
** --Decorations-- (@@done@@)
*** @@NOTE@@: TeX commands, xyverbose, xytracing, xyquiet, xycompile, xycompileto does not work.

* --Implement kernel object library-- (@@done@@)
** --Directionals-- (@@done@@)
*** --Plain connectors-- (@@done@@)
*** --Plain tips-- (@@done@@)
*** --Constructed tips-- (@@done@@)
** --Circle segments-- (@@done@@)
** --Text-- (@@done@@)
*** NOTE: the <width> option of the \txt does not work.

* Implement extensions
** Curve and Spline extension
*** Curved connections (@@almost done@@)
**** TODO: implement curve-options
*** Circles and Ellipses
*** Quadratic splines
** --Frames and Bracket extension-- (@@done@@)
*** --Frames-- (@@done@@)
*** --Brackets-- (@@done@@)
*** --Filled regions-- (@@done@@)
*** --Framing as object modifier-- (@@done@@)
** Line style extension
** Rotate and Scale extension
** Color extension
*** --SVG colors-- (@@done@@)
*** Crayola colors
** --Import graphics extension-- (@@done@@)
*** NOTE: Limitations
**** the \includegraphics command must be directly written in the last argument of \xyimport.
**** the width and height attributes of the \includegraphics are mandatory (and only supported).

* Implement features
** Arrow and Path feature (@@almost done@@)
*** --Paths-- (@@done@@)
*** Arrows (@@almost done@@)
**** TODO: implements @!.
** Two-cell feature (@@almost done@@)
*** TODO: implements \xtwocell's <displace>, \modmapobject{}.
*** NOTE: \modmapobject, \twocellhead, \twocelltail, \arrowobject, \curveobject, \uppercurveobject, \lowercurveobject, \UseTwocells, \UseHalfTwocells, \UseCompositeMaps, \UseAllTwocells
** --Matrix feature-- (@@done@@)
*** --Xy-matrices-- (@@done@@)
**** NOTE: \xymatrixrowsep, \xymatrixcolsep, \entrymodifiers, \everyentry, \Row, \Col, \CompileMatrices, \NoCompileMatrices does not work.
** Graph feature
*** NOTE: \newgraphescape does not work.
** Polygon feature
** Lattice and web feature
** Circle, Ellipse, Arc feature
** Knots and Links feature
\[
\begin{xy}
\xymatrix @=4pc {
  x \ruppertwocell^f{\alpha}
    \ar^(0.35){f'}[r]
    \rlowertwocell_{f''}{\alpha'}
& y
}
\end{xy} = \begin{xy}
\xymatrix @=4pc {
  x \rtwocell^f_{f''}{*[r]{\scriptstyle \alpha'\cdot\alpha}}
& y
}
\end{xy}
\]

Source code:
{{{
\begin{xy}
\xymatrix @=4pc {
  x \ruppertwocell^f{\alpha}
    \ar^(0.35){f'}[r]
    \rlowertwocell_{f''}{\alpha'}
& y
}
\end{xy} = \begin{xy}
\xymatrix @=4pc {
  x \rtwocell^f_{f''}{*[r]{\scriptstyle \alpha'\cdot\alpha}}
& y
}
\end{xy}
}}}
> Xy-pic is a package for typesetting graphs and diagrams using the principle of "logical composition of visual components."
Please visit [[Xy-pic's home page|http://www.tug.org/applications/Xy-pic/]]
!About XyJax
XyJax is an almost [[Xy-pic]] compatible extension for MathJax.
This extension enables you to draw various graphs and diagrams.

\[
\begin{xy}
\xymatrix {
U \ar@/_/[ddr]_y \ar@{.>}[dr]|{\langle x,y \rangle} \ar@/^/[drr]^x \\
 & X \times_Z Y \ar[d]^q \ar[r]_p & X \ar[d]_f \\
 & Y \ar[r]^g & Z
}
\end{xy}
\]
This diagram was drawn by the code:
{{{
\begin{xy}
\xymatrix {
U \ar@/_/[ddr]_y \ar@{.>}[dr]|{\langle x,y \rangle} \ar@/^/[drr]^x \\
 & X \times_Z Y \ar[d]^q \ar[r]_p & X \ar[d]_f \\
 & Y \ar[r]^g & Z
}
\end{xy}
}}}

!Limitation
* Supported Browsers: Firefox, Safari, Chrome, Opera, Internet Explorer 9 (IE9 Standards Mode only)
* Supported Math Renderer: HTML-CSS, SVG (MathJax 2.1 or later required)
* This software is under development.

!Current Implementation Status
* See ToDo
\[
\begin{xy}
\xyimport(3.7, 3.7)(1.4, 1.4){\includegraphics[width=15em, height=15em]{./xyjax_images/ellip.png}}
,!D+<2pc, -1pc>*+!U\txt{Rational points on the elliptic curve: $x^3+y^3=7$.}
,(1,0)*+!U{1},
,(-1,0)*+!U{-1}
,(0,1)*+!R{1},
,(0,-1)*+!R{-1}
,(2,-1)*+!RU{P}
,(-1,2)*+!RU{-P}
,(1.3333,1.6667)*+!UR{-2P}
,(1.6667,1.3333)*!DL{\;2P}
,(-.5,1.9)*++!DL{3P}
,(1.9,-.5)*!DL{\;-3P}
,(-1,2.3)*+++!D{\infty}*=0{},{\ar+(-.2,.2)}
,(.5,2.3)*+++!D{\infty}*=0{},{\ar+(-.2,.2)}
,(2.3,-1)*+++!L{\infty}*=0{},{\ar+(.2,-.2)}
\end{xy}
\]

Source Code:
{{{
\begin{xy}
\xyimport(3.7, 3.7)(1.4, 1.4){\includegraphics[width=15em, height=15em]{./xyjax_images/ellip.png}}
,!D+<2pc, -1pc>*+!U\txt{Rational points on the elliptic curve: $x^3+y^3=7$.}
,(1,0)*+!U{1},
,(-1,0)*+!U{-1}
,(0,1)*+!R{1},
,(0,-1)*+!R{-1}
,(2,-1)*+!RU{P}
,(-1,2)*+!RU{-P}
,(1.3333,1.6667)*+!UR{-2P}
,(1.6667,1.3333)*!DL{\;2P}
,(-.5,1.9)*++!DL{3P}
,(1.9,-.5)*!DL{\;-3P}
,(-1,2.3)*+++!D{\infty}*=0{},{\ar+(-.2,.2)}
,(.5,2.3)*+++!D{\infty}*=0{},{\ar+(-.2,.2)}
,(2.3,-1)*+++!L{\infty}*=0{},{\ar+(.2,-.2)}
\end{xy}
}}}
\[
\begin{xy}
\xymatrix{
U \ar@/_/[ddr]_y \ar@{.>}[dr]|{\langle x,y \rangle} \ar@/^/[drr]^x \\
 & X \times_Z Y \ar[d]^q \ar[r]_p & X \ar[d]_f \\
 & Y \ar[r]^g & Z
}
\end{xy}
\]
\[
\begin{xy}
\xymatrix@R=1pc{
\zeta \ar@{|->} [dd] \ar@{.>}_\theta [rd] \ar@/^/^\psi [rrd] \\
 & \xi \ar@{|->} [dd] \ar_\phi [r] & \eta \ar@{|->} [dd] \\
 P_{F}\zeta \ar_t [rd] \ar@/^/ [rrd]|!{[ru];[rd]}\hole \\
 & P_{F}\xi \ar [r] & P_{F}\eta
}
\end{xy}
\]
\[
\begin{xy}
\xymatrix @W=3pc @H=1pc @R=0pc @*[F-] {
: \save+<-4pc,1pc>*{\it root}
    \ar[]
  \restore \\
{\bullet}
  \save*{}
    \ar `r[dd]+/r4pc/ `[dd] [dd]
  \restore \\
{\bullet}
  \save*{}
    \ar `r[d]+/r3pc/ `[d]+/d2pc/ `[uu]+/l3pc/ `[uu] [uu]
  \restore \\
1
}
\end{xy}
\]
\[
\begin{xy}
\xymatrix {
*+!!A{c} \ar[r] \ar[d] & 
*+!!A{a\frac{x}{y}} \ar[r] \ar[d] \ar[ld] & 
*+!!A{\underline{\underline{g}}} \ar[r] \ar[d] \ar[ld] & 
*+!!A{\hat{\hat{\overline{\overline{h^2}}}}} \ar[d] \ar[ld] \\
    {c} \ar[r] & 
    {a\frac{x}{y}} \ar[r] & 
    {\underline{\underline{g}}} \ar[r] & 
    {\hat{\hat{\overline{\overline{h^2}}}}} \\
}
\end{xy}
\]
\[
\newcommand\Ker{\mathrm{Ker}\,}
\newcommand\Coker{\mathrm{Coker}\,}
\begin{xy}
\xymatrix {
  0 \ar@[red][r] 
  & {\Ker f} \ar@[red][r] 
  & {\Ker a} \ar@[red][r] \ar[d] 
  & {\Ker b} \ar@[red][r] \ar[d] 
  & {\Ker c} \ar@[red]@`{[]+/r10pc/, [dddll]+/l10pc/}[dddll]_(0.55)d \ar[d]
\\
  &
  & A \ar@[blue][r]^f \ar@[blue][d]^a 
  & B \ar@[blue][r] \ar@[blue][d]^b 
  & C \ar@[blue][r] \ar@[blue][d]^c 
  & 0
\\
  & 0 \ar@[blue][r] 
  & A' \ar@[blue][r] \ar[d] 
  & B' \ar@[blue][r]^{g'} \ar[d] 
  & C' \ar[d]
\\
  &
  & {\Coker a} \ar@[red][r] 
  & {\Coker b} \ar@[red][r] 
  & {\Coker c} \ar@[red][r] 
  & {\Coker g'} \ar@[red][r] 
  & 0
}
\end{xy}
\]
\[
\begin{xy}
\xymatrix{
\mathcal R \ar[r]<2pt>^{r_1} \ar[r]<-2pt>_{r_2} & S \ar[r]^q \ar[dr]_f & S / \mathcal R \ar@{.>}[d]^{\bar f} \\
 & & T
}
\end{xy}
\]

Source code:
{{{
\begin{xy}
\xymatrix{
U \ar@/_/[ddr]_y \ar@{.>}[dr]|{\langle x,y \rangle} \ar@/^/[drr]^x \\
 & X \times_Z Y \ar[d]^q \ar[r]_p & X \ar[d]_f \\
 & Y \ar[r]^g & Z
}
\end{xy}
}}}
{{{
\begin{xy}
\xymatrix@R=1pc{
\zeta \ar@{|->} [dd] \ar@{.>}_\theta [rd] \ar@/^/^\psi [rrd] \\
 & \xi \ar@{|->} [dd] \ar_\phi [r] & \eta \ar@{|->} [dd] \\
 P_{F}\zeta \ar_t [rd] \ar@/^/ [rrd]|!{[ru];[rd]}\hole \\
 & P_{F}\xi \ar [r] & P_{F}\eta
}
\end{xy}
}}}
{{{
\begin{xy}
\xymatrix @W=3pc @H=1pc @R=0pc @*[F-] {
: \save+<-4pc,1pc>*{\it root}
    \ar[]
  \restore \\
{\bullet}
  \save*{}
    \ar `r[dd]+/r4pc/ `[dd] [dd]
  \restore \\
{\bullet}
  \save*{}
    \ar `r[d]+/r3pc/ `[d]+/d2pc/ `[uu]+/l3pc/ `[uu] [uu]
  \restore \\
1
}
\end{xy}
}}}
{{{
\begin{xy}
\xymatrix {
*+!!A{c} \ar[r] \ar[d] & 
*+!!A{a\frac{x}{y}} \ar[r] \ar[d] \ar[ld] & 
*+!!A{\underline{\underline{g}}} \ar[r] \ar[d] \ar[ld] & 
*+!!A{\hat{\hat{\overline{\overline{h^2}}}}} \ar[d] \ar[ld] \\
    {c} \ar[r] & 
    {a\frac{x}{y}} \ar[r] & 
    {\underline{\underline{g}}} \ar[r] & 
    {\hat{\hat{\overline{\overline{h^2}}}}} \\
}
\end{xy}
}}}
{{{
\newcommand\Ker{\mathrm{Ker}\,}
\newcommand\Coker{\mathrm{Coker}\,}
\begin{xy}
\xymatrix {
  0 \ar@[red][r] 
  & {\Ker f} \ar@[red][r] 
  & {\Ker a} \ar@[red][r] \ar[d] 
  & {\Ker b} \ar@[red][r] \ar[d] 
  & {\Ker c} \ar@[red]@`{[]+/r10pc/, [dddll]+/l10pc/}[dddll]_(0.55)d \ar[d]
\\
  &
  & A \ar@[blue][r]^f \ar@[blue][d]^a 
  & B \ar@[blue][r] \ar@[blue][d]^b 
  & C \ar@[blue][r] \ar@[blue][d]^c 
  & 0
\\
  & 0 \ar@[blue][r] 
  & A' \ar@[blue][r] \ar[d] 
  & B' \ar@[blue][r]^{g'} \ar[d] 
  & C' \ar[d]
\\
  &
  & {\Coker a} \ar@[red][r] 
  & {\Coker b} \ar@[red][r] 
  & {\Coker c} \ar@[red][r] 
  & {\Coker g'} \ar@[red][r] 
  & 0
}
\end{xy}
}}}
{{{
\begin{xy}
\xymatrix{
\mathcal R \ar[r]<2pt>^{r_1} \ar[r]<-2pt>_{r_2} & S \ar[r]^q \ar[dr]_f & S / \mathcal R \ar@{.>}[d]^{\bar f} \\
 & & T
}
\end{xy}
}}}