Dieses Plugin ist nicht mit den jüngsten 3 Hauptversionen von WordPress getestet worden. Es wird möglicherweise nicht mehr gewartet oder unterstützt und kann Kompatibilitätsprobleme haben, wenn es mit neueren Versionen von WordPress verwendet wird.

Total Diagram


Total Diagram is a diagramming web application. Useful for systematization and prototyping.
Write down your ideas on sticky notes, visualize your programming API as a tree structure.

To begin:

Put [total-diagram] shortcode on page.

Important note:

For the best experience you’ll need a full-screen theme or at least use custom css to make diagram window wide enough.
See Installation section for more details.

For safety reasons remember to use latest stable versions of browser, WordPress and other plugins.


Add new node: right click on background (two fingers on modern touchpad) -> context menu -> Add node

Quick add node: doubleclick (last used type)

Select node: click on node

Drag node: click on node and drag

Pan view: click on background adn drag or scroll with two fingers on modern touchpad

Zoom view: pinch gesture on modern touchpad (requires Chrome or Firefox) or scroll with CTRL key

Context menu: right click (two fingers on modern touchpad)

Connect nodes with link: select two nodes and right click for context menu -> Add link

Smart zoom view: + – keys

Center view: 0 key


  1. Upload the plugin files to the /wp-content/plugins/total-diagram directory, or install the plugin through the WordPress plugins screen directly.
  2. Activate the plugin through the ‚Plugins‘ screen in WordPress.
  3. Create any page (e.g. ‚Total‘) and put shortcode [total] or [total-diagram] there.
  4. Instead of using shortcode you can use widget if your theme supports it.
  5. Plugin works only for logged-in users.
  6. Probably you preffer to use plugin in the full-screen mode, so you can:
    • choose clean full-screen theme for your site
    • or you can tweak div id ‚#total-diagram‘ with surroundings using css (Appearance -> Customize -> Additional CSS)
    • or customize only one page for this plugin read about Page Templates here
    • additionally you may hide WordPress toolbar in ‚Users -> Your Profile: Show Toolbar when viewing site‘
  7. Other tweaks:
    • Preffered resolution for image miniatures is 256×256 (or 512×512 when you need quality). You can set it in WordPress Admin -> Settings -> Media: Thumbnail Size.


What browsers are supported?

Chrome 68, Firefox 61, Safari 11

Does it work on mobile devices?

Not yet

What technologies are used?

Javascript/ES6, Html5, Css3, WebGL, Three.js library

Mitwirkende & Entwickler

„Total Diagram“ ist Open-Source-Software. Folgende Menschen haben an diesem Plugin mitgewirkt:


Übersetze „Total Diagram“ in deine Sprache.

Interessiert an der Entwicklung?

Durchstöbere den Code, sieh dir das SVN Repository an oder abonniere das Entwicklungsprotokoll per RSS.



  • Fixed the most unacceptable omission: pink color for sticky notes. Now it’s supported!
  • Introducing Node Clipart
  • Introducing 3d layers
  • Improved Node Point with new functionality
  • Fixed Node Image
  • Switched from .svg to .obj 3d model format
  • Preloader
  • Minor fixes and optmizations
  • Updated third-party library Three.js to r100
  • Bumped WordPress version requirement to 5.0+


  • Bugfix release
  • Fixed issues with keys in Firefox
  • Fixed text in Node Image


  • Introducing new nodes: Image and File
  • Drag&drop external files, images and text directly onto diagram
  • Updated third-party library Three.js to r97
  • Welcome tutorial
  • Fixed some minor issues


  • Fixed linking nodes
  • Spinner during loading
  • New functionality for Node Point: move with children, show/hide children
  • Updated third-party library Three.js to r96
  • Fixed menu position
  • Fixed message about number of deleted nodes


  • Speed optimizations
  • Fixed saving ‚+‘ and ‚&‘ characters in database
  • Fixed current data folder
  • Added both [total] and [total-diagram] shortcodes
  • Minimal window size increased to 800×600
  • Protect widget for logged-in users only
  • Redirect non-admins to main page after login
  • Prevent caching
  • Simple word dividing
  • Remove default values in database
  • Prevent event flood while dragging node


  • Initial release