Pinker.js
A standalone JavaScript library for rendering code/class diagrams on your web page.
Version 1.3.0

[Documentation on GitHub]

Types of Arrows
Layout:
	[A][A2]
	[B][B2][C][C2]
	[D][D2]
	[E][E2]
	[F][F2]
	[G][G2]
	[H][H2]
	[I][I2]
	[J][J2]
	[K][K2]
Relate:
	[A]->[A2]
	[B]-D[B2]
	[C]-:>[C2]
	[D]-o[D2]
	[E]-+[E2]
	[F]-1[F2]
	[G]-11[G2]
	[H]-N[H2]
	[I]-01[I2]
	[J]-1N[J2]
	[K]-0N[K2]
			
Types of Lines
Layout:
	[A][A2][A3][A4]
	[B][B2][B3][B4]
	[C][C2][C3][C4]
	[D][D2][D3][D4]
Relate:
	[A]->[A2]
	[A3]-[A4]
	[B]=>[B2]
	[B3]=[B4]
	[C]-->[C2]
	[C3]--[C4]
	[D]*>[D2]
	[D3]*[D4]
			
Single-level Diagram
Layout:
	[A]
	[B][D][E]
	[C]...[F]
Relate:
	[B]->[A],[C]
	[D]->[B],[E],[F]
			
Multi-level Diagram
Layout:
	[A][B]
[A]:
	Layout:
		[C][D]
	Relate:
		[C]->[D]
		[D]->[B.E]
[B]:
	Layout:
		[E]
		[F]
	Relate:
		[E]->[F]
		[F]->[A.D]
			
Labeled Lines
Layout:
	[A]
	[B]
	[C]
Relate:
	[A]->[C] "1":"2":"3"
			
Using Aliases
Layout:
	[{A}Long Long Label A][{B}Long Long Label B]
Relate:
	{A}->{B}
{A}:
	Layout:
		[{C}Long Long Label C]
{B}:
	Layout:
		[D]
	Relate:
		[D]->{C}.[E.F]
{C}:
	Layout:
		[E]
{C}.[E]:
	Layout:
		[F]
			
Definitions
Layout:
	[A][B]
Relate:
	[A]->[B]
[A]:
	Define:
		oneField
		twoField|
		getOneField()
		getTwoField()
		setTwoField(x, y)
	Layout:
		[C]
[B]:
	Define:
		fourField
		fiveField