{ "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[1]-based javascript library for drawing Feynman diagrams

Download Guide

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