From Audacity Wiki
Revision as of 16:30, 6 September 2020 by James (talk | contribs) (Naming updates.)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search
Wikidiagrams is a javascript library for creating interactive diagrams
  • The source for diagrams is stored and edited as text in wiki.
  • The diagrams can contain multiple elements, which are drawn onto a canvas.

The library occupies the middle ground between charting libraries (which make adding custom decoration and interaction to diagrams difficult), and image editors (which make data-driven images difficult). The toolkit can combine data-driven diagrams and custom elements. The interactive diagram is best thought of as a program for drawing an image.


  • Toolbox/Examples shows examples of the different kinds of diagrams.
  • Toolbox/Tutorials is the start of explanatory documentation about Audacity source code and digital audio. These pages soften use static images which later will be replaced by more dynamic ones.


The library uses visual containers to control layout of elements.

  • HStack - A horizontal row of items
  • VStack - A vertical column of items
  • Flow - A layout like that for text, where elements are added left to right, starting a new line if necessary.
  • Overlay - Items 'drawn over' each other.

The number and sizes of items in a container can change, and the positioning will be updated accordingly. This is important for international text, where labels may change in size depending on the language. It also is important for data driven diagrams. If there are more pieces of data, elements can move to show them.

Javascript Safety

Javascript is supported indirectly, so there is no 'eval' of javascript expressions. Wikidiagrams uses JSON.parse to gather data. The library may place text into HTML DOM elements using the innerHTML property. Where it does so, the text is passed through a sanitizer which has a white-list for what HTML elements it allows through. The code has not been reviewed for security implications and needs to be used with care. Currently it should not be open to untrusted users.

Phishing Safety

Wikidiagrams is flexible enough to draw fake log in and other screens. It cannot draw outside the canvas, so safety versus phishing attempts may require a frame around the canvas, and may depend on details of how and where the canvas can be shown.