{ "title" : "E-P Annihilation", "width" : 250, "height" : 250, "lang" : "latex", "diagram": [ "fmftop{i1,i2}", "fmfbottom{o1,o2}", "fmf{fermion}{i2,v1,i1}", "fmf{fermion}{o2,v2,o1}", "fmf{photon,labely=-10,label=$\\underline{A_\\mu(x)A_\\nu(x')}$}{v1,v2}", "fmf{photon}{v1,v2}", "fmfdot{v1,v2}", "fmflabel{i2,labelx=0,labely=-20}{$\\psi(x')$}", "fmflabel{i1,labely=-23,labelx=-27}{$\\overline{\\psi}(x')$}", "fmflabel{o2}{$\\psi(x)$}", "fmflabel{o1,labelx=-27,labely=-4}{$\\overline{\\psi}(x)$}" ] }

# FeynmanJS

feynMF-based javascript library for drawing Feynman diagrams

#### Syntax

FeynmanJS comes with a $\LaTeX$-based parser out of the box, however it is extendable and you can write your own plugin.

#### Layout

FeynmanJS will try to figure out the best possible layout for your diagram without any manual fiddling with pixel coordinates etc.

#### Scalable

Diagrams are drawn with SVG meaning they scale well on all devices.

### Quick Start

#### HTML

Just insert a new block element where you would like your diagram to be rendered to; then assign the feynmanjs class to to that element.


<div class="feynmanjs"></div>


#### Diagram

Next, add some diagram code in JSON.


<div class="feynmanjs">
{
"title"  : "Box diagram",
"width"  : 400,
"height" : 270,
"diagram": [
"fmfleftn{2}",
"fmfrightn{2}",
"fmf{fermion}{o1,v2,v1,i1}",
"fmf{fermion}{i2,v3,v4,o2}",
"fmf{photon}{v1,v3}",
"fmf{photon}{v2,v4}"
]
}
</div>


#### Javascript

All is left is to include Feynman and instantiate it


<script src="/js/feynman.min.js"></script>
<script>
var feynman = new Feynman();
</script>


#### Result

{ "title" : "Box diagram", "width" : 400, "height" : 270, "diagram": [ "fmfleftn{2}", "fmfrightn{2}", "fmf{fermion}{o1,v2,v1,i1}", "fmf{fermion}{i2,v3,v4,o2}", "fmf{photon}{v1,v3}", "fmf{photon}{v2,v4}" ] }

#### References

1. Thorsten Ohl, (December 30, 1997). feynMF (online).
2. Zan Pan, (2014). jQuery.Feyn (online).