plantuml-mindmap-loader

Purpose

This plugin allows importing PlantUML mind map diagrams as JS objects with webpack. Instead of parsing the diagrams at runtime, the diagrams are parsed at build time and the resulting JS objects are bundled with the rest of the code.

The story of creation of this plugin is described in the blog post: Medium, dev.to, personal blog.

IMPORTANT

This package is not implementing the entire variety of PlantUML diagrams. It only implements the basic use of mindmap diagram - OrgMode syntax.

See OrgMode syntax in official PlantUML documentation.

It can process PlantUML diagrams like this:

@startmindmap
* Root
** Node 1
*** Node 1.1
**** Node 1.1.1
**** Node 1.1.2
*** Node 1.2
** Node 2
@endmindmap

Installation steps

1. npm install --save-dev plantuml-mindmap-loader
2. Add the loader to your webpack config:

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.mindmap.puml$/,
        use: 'plantuml-mindmap-loader'
      },
    ]
  },

Usage

Basic usage

Add a .mindmap.puml file to your project and import it like this:

import treeMindMap from "./tree.mindmap.puml";

export function printTree() {
  console.log(JSON.stringify(navigationMindMap, null, 2));
}

When ran, it will produce:

{
  "id": 3,
  "label": "Root",
  "tags": [],
  "children": [
    {
      "id": 4,
      "label": "Node 1",
      "tags": [],
      "children": [
        {
          "id": 5,
          "label": "Node 1.1",
          "tags": [],
          "children": [
            {
              "id": 6,
              "label": "Node 1.1.1",
              "tags": [],
              "children": []
            },
            {
              "id": 7,
              "label": "Node 1.1.2",
              "tags": [],
              "children": []
            }
          ]
        },
        {
          "id": 8,
          "label": "Node 1.2",
          "tags": [],
          "children": []
        }
      ]
    },
    {
      "id": 9,
      "label": "Node 2",
      "tags": [],
      "children": []
    }
  ]
}

Note: The id property is added automatically to each node. It is the number of the line where the node is defined in the diagram.

Tags

The mind map parser supports tags. Tags are added to the diagram like this:

@startmindmap
* Root #tag1 #tag2
** Node 1 #tag3
@endmindmap

These tags will be present in tags property of the respective nodes:

{
  "id": 3,
  "label": "Root",
  "tags": [
    "#tag1",
    "#tag2"
  ],
  "children": [
    {
      "id": 4,
      "label": "Node 1",
      "tags": [
        "#tag3"
      ],
      "children": []
    }
  ]
}