{"id":5054,"date":"2026-08-30T04:30:34","date_gmt":"2026-08-29T19:30:34","guid":{"rendered":"https:\/\/donguri3.net\/server-tech\/wp-admin-mind-map-plugin-2\/"},"modified":"2026-08-30T04:30:35","modified_gmt":"2026-08-29T19:30:35","slug":"wp-admin-mind-map-plugin","status":"publish","type":"post","link":"https:\/\/donguri3.net\/en\/server-tech\/wordpress-blog-seo\/wp-admin-mind-map-plugin\/","title":{"rendered":"I Built a WordPress Plugin to Jot Down Article Ideas Using Mind Maps in the Admin Screen"},"content":{"rendered":"<p class=\"\">When writing articles in WordPress, I wanted a simple way to quickly jot down sudden ideas somewhere\u2014born from that very wish is the &#8220;Mind Elixir Admin Mind Maps&#8221; plugin. I felt inconvenienced by saving them as drafts in posts or pages, and was looking for a system where I could quickly take notes more intuitively somewhere in the admin dashboard.<\/p>\n<p>Source code here: <a>https:\/\/github.com\/bomura\/wp-mind-elixir-admin<\/a><\/p>\n<h2 class=\"\">Motivation for Development<\/h2>\n<ul>\n<li class=\"\">\n<p class=\"\"><strong>Nowhere to put ideas<\/strong><br \/>While there are regular &#8220;draft&#8221; or &#8220;memo&#8221; plugins, they fall short when it comes to getting a bird&#8217;s-eye view of an article structure or expanding branches and sub-topics.<\/p>\n<\/li>\n<li class=\"\">\n<p class=\"\"><strong>The flexibility unique to mind maps<\/strong><br \/>With a mind map, where headings and sections can be dynamically added or moved as nodes, leaps in thought and associations flow smoothly.<\/p>\n<\/li>\n<li class=\"\">\n<p class=\"\"><strong>The simplicity of Mind Elixir<\/strong><br \/>&#8220;Mind Elixir&#8221;, an open-source lightweight JavaScript library, can be loaded with just a single line of CDN and comes with drag-and-drop and export features. I thought this could be seamlessly integrated into the existing admin screen, which is where it all started.<\/p>\n<\/li>\n<\/ul>\n<h2 class=\"\">Plugin Architecture and Key Files<\/h2>\n<div class=\"contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary\">\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\"> wp-mind-elixir-admin\/\n\u251c\u2500\u2500 wp-mind-elixir-admin.php      \u2190 Main plugin file (admin menu registration, data saving process)\n\u251c\u2500\u2500 readme.txt                    \u2190 Plugin information for WordPress.org\n\u251c\u2500\u2500 assets\/                       \u2190 Screenshots and icons\n\u251c\u2500\u2500 css\/\n|   \u2514\u2500\u2500 wp-mind-elixir-admin.css  \u2190 Mind Elixir CSS\n\u2514\u2500\u2500 js\/\n    \u2514\u2500\u2500 wp-mind-elixir-admin.js   \u2190 Mind Elixir loading & initialization script <\/pre>\n<\/div>\n<ul>\n<li class=\"\">\n<p class=\"\"><strong>wp-mind-elixir-admin.php<\/strong><\/p>\n<ul>\n<li class=\"\">\n<p class=\"\">Adds the &#8220;Mind Map Editor&#8221; menu using <code>add_menu_page()<\/code><\/p>\n<\/li>\n<li class=\"\">\n<p class=\"\">Loads CSS\/JS for Mind Elixir via admin hooks<\/p>\n<\/li>\n<li class=\"\">\n<p class=\"\">Saves and retrieves JSON data to\/from the option <code>mind_elixir_map_data<\/code> via AJAX or form submission<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li class=\"\">\n<p class=\"\"><strong>wp-mind-elixir-admin.js<\/strong><\/p>\n<ul>\n<li class=\"\">\n<p class=\"\">Loads the core Mind Elixir library via CDN<\/p>\n<\/li>\n<li class=\"\">\n<p class=\"\">Binds actions for the save and reset buttons<\/p>\n<\/li>\n<li class=\"\">\n<p class=\"\">Restores the map based on JSON loaded from WordPress upon initial load<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h2 class=\"\">Screen Capture<\/h2>\n<div><a href=\"https:\/\/donguri3.net\/wp-content\/uploads\/2025\/04\/Mind_Map_Editor_Page.png\"><img decoding=\"async\" class=\"aligncenter size-thumb710 wp-image-1474\" src=\"https:\/\/donguri3.net\/wp-content\/uploads\/2025\/04\/Mind_Map_Editor_Page-710x553.png\" alt=\"Mind map plugin example\" width=\"710\" height=\"553\" srcset=\"https:\/\/donguri3.net\/wp-content\/uploads\/2025\/04\/Mind_Map_Editor_Page-710x553.png 710w, https:\/\/donguri3.net\/wp-content\/uploads\/2025\/04\/Mind_Map_Editor_Page-300x234.png 300w, https:\/\/donguri3.net\/wp-content\/uploads\/2025\/04\/Mind_Map_Editor_Page-1024x797.png 1024w, https:\/\/donguri3.net\/wp-content\/uploads\/2025\/04\/Mind_Map_Editor_Page-768x598.png 768w, https:\/\/donguri3.net\/wp-content\/uploads\/2025\/04\/Mind_Map_Editor_Page-530x413.png 530w, https:\/\/donguri3.net\/wp-content\/uploads\/2025\/04\/Mind_Map_Editor_Page-565x440.png 565w, https:\/\/donguri3.net\/wp-content\/uploads\/2025\/04\/Mind_Map_Editor_Page-725x565.png 725w, https:\/\/donguri3.net\/wp-content\/uploads\/2025\/04\/Mind_Map_Editor_Page.png 1152w\" sizes=\"(max-width: 710px) 100vw, 710px\" \/><\/a><\/div>\n<p class=\"\">The &#8220;Mind Map Editor&#8221; page added to the admin screen. You can add and edit nodes with an intuitive UI.<\/p>\n<h2 class=\"\">User Guide<\/h2>\n<ol>\n<li class=\"\">\n<p class=\"\"><strong>Activate the Plugin<\/strong><br \/>Upload the plugin folder to <code>\/wp-content\/plugins\/wp-mind-elixir-admin<\/code> and activate it, and a new menu will appear in the sidebar.<\/p>\n<\/li>\n<li class=\"\">\n<p class=\"\"><strong>Access the Editor<\/strong><br \/>Go to the left sidebar \u2192 open <strong>Mind Map Editor<\/strong> to display the editor screen.<\/p>\n<\/li>\n<li class=\"\">\n<p class=\"\"><strong>Add\/Edit Nodes<\/strong><br \/>Click the center of the screen to add a new node. You can adjust positions via drag and drop.<\/p>\n<\/li>\n<li class=\"\">\n<p class=\"\"><strong>Save\/Reset<\/strong><br \/>Click the &#8220;Save&#8221; button in the top right to save to WordPress options. Click the &#8220;Reset&#8221; button to return to the initial state.<\/p>\n<\/li>\n<\/ol>\n<h2 class=\"\">Future Outlook<\/h2>\n<ul>\n<li class=\"\">\n<p class=\"\">Support for embedding in the post screen<\/p>\n<\/li>\n<li class=\"\">\n<p class=\"\">Feature to switch between multiple maps<\/p>\n<\/li>\n<li class=\"\">\n<p class=\"\">Enhancement of export functions (PNG\/SVG)<\/p>\n<\/li>\n<li>Auto-save feature at regular intervals<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>When writing articles in WordPress, I wanted a simple way to quickly jot down sudden ideas somewhere\u2014born from [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":1474,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_locale":"en_US","_original_post":"https:\/\/donguri3.net\/?p=1470","footnotes":""},"categories":[1166],"tags":[119,51,52,534,61,179,153,181,531,533],"class_list":["post-5054","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress-blog-seo","tag-cdn","tag-git","tag-https","tag-mind-elixir","tag-wordpress","tag-179","tag-153","tag-181","tag-531","tag-533","en-US"],"_links":{"self":[{"href":"https:\/\/donguri3.net\/wp-json\/wp\/v2\/posts\/5054","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/donguri3.net\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/donguri3.net\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/donguri3.net\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/donguri3.net\/wp-json\/wp\/v2\/comments?post=5054"}],"version-history":[{"count":1,"href":"https:\/\/donguri3.net\/wp-json\/wp\/v2\/posts\/5054\/revisions"}],"predecessor-version":[{"id":5057,"href":"https:\/\/donguri3.net\/wp-json\/wp\/v2\/posts\/5054\/revisions\/5057"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/donguri3.net\/wp-json\/wp\/v2\/media\/1474"}],"wp:attachment":[{"href":"https:\/\/donguri3.net\/wp-json\/wp\/v2\/media?parent=5054"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/donguri3.net\/wp-json\/wp\/v2\/categories?post=5054"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/donguri3.net\/wp-json\/wp\/v2\/tags?post=5054"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}