Request: Add other directions to the mind map visualization

[juarezr]

Feature Request: Add other directions to the mind map visualization

Overview

• Currently, markmap-vscode only supports visualizing mind maps in the left-to-right direction.
• It would be interesting to have more visualization options in the extension.
• This would allow new forms of expressing and visualizing mappings of ideas, concepts, and hierarchies.

Below, I compiled some suggestions for improving, in my opinion, this extension.

New Directions

See below for some examples of possible directions. I've included some example applications
for each suggestion, but the user can use the direction to express any of his concepts or ideas.

One direction

• left-right:
  • This is the current visualization and will be the default one.
• right-left: useful to express:
  • Game Brackets
  • Product/Project Scope
  • Right-to-left languages
• top-bottom: useful to express:
  • Organizational Charts
  • Hierarchies
  • Decision Matrix
  • OKR Planning
  • PESTLE Analysis
  • Product categorization
• bottom-top:
  • Sales Funnel
  • Artifact Assembly
  • Lean Canvas
• diagonal-bottom-right:
  • File/Folder hierachies/listings
• other one-direction examples:
  • diagonal-bottom-left, diagonal-top-right, diagonal-top-left

Two directions

• center-left-right:
  • Directions: left <- center -> right
  • Game brackets: divisions, conferences, rounds
• other two directions examples:
  • diagonal-bottom-left, diagonal-top-right, diagonal-top-left

Four directions

• center-corner:
  • Directions: top-left, bottom-left <- center -> top-right
  • Balanced Scorecard
  • SWOT Analysis: Strengths, Weaknesses, Opportunities, Threats
  • Game brackets: 4 groups
• center-edge:
  • Directions: left, right <- center -> top, bottom
  • Cross-shaped steps
• center-square:
  • Directions: top-left, bottom-left <- center -> top-right
  • Quadrants
  • SWOT Analysis

Non-power-of-2 directions

• Radial:
  • Clocks, Daily schedule
  • Angle diagrams

Diagram customization

See below for some examples of possible customization to the shape of the edges and vertices.

Edges

• Line style:
  • curved: the current style
  • sharp
  • rounded
  • straight
  • orthogonal/squared
  • isometric
• Stroke style:
  • solid
  • dashes
  • dots, dash-dot...
• Connector Start/End style:
  • Connector: none, arrow, circle, square, triangle, diamond, plus, ...
  • Fill: none, borders, filled

Vertices

• Shape style:
  • None: the current style
  • Square
  • Rounded
• Spacing style:
  • Minimal: Around the Text
  • Expanded: Fill the item space

Frontmatter settings

Add new options parsed from the Markdown Frontmatter so the user can set the default direction for that file:

• view-direction:
  • left-right, right-left, top-bottom, center-left-right, center-corner, etc...
• text-direction:
  • for users of non-left-to-right languages like Arabic, Chinese, Japanese, etc...
• styles:
  • inner/sub properties: line, stroke, start, end, shape, spacing
  • for customizing the diagram styles

Preview Enhancements

Add new UI widgets in the Markmap editor preview to specify in which direction the mind map may be rendered/viewed:

• New direction button/combo/picker in the toolbar:
  • For setting the available directions in the visualization
  • Start with the setting from the Frontmatter
  • Would allow changing the direction without modifying the markdown file.
• New styles button/combo/picker in the toolbar:
  • For setting the CSS styles in the visualization
  • Would get its items from:
    • a pre-configured list of styles: color, font, line width, borders, fill
    • a list of styles configured for the extension in the user's settings
• New apply button in the toolbar:
  • Updates the markdown file with the changes made in the editor

References

• MindMeister