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

[Documentation on GitHub]

Types of arrows
Layout:
	[A][B]
	[C][D][E][F]
	[G][H]
	[I][J]
Relate:
	[A]->[B]
	[C]-D[D]
	[E]-:>[F]
	[G]-o[H]
	[I]-+[J]
			
Types of lines
Layout:
	[A][B][G][H]
	[C][D][I][J]
	[E][F][K][L]
Relate:
	[A]->[B]
	[C]=>[D]
	[E]-->[F]
	[G]-[H]
	[I]=[J]
	[K]--[L]
			
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]
			
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