add newest blog posts

Merge pull request #6930 from mermaid-js/rajat-ht/chore-editor-selection-update
Chore: Simplify editor selection to single version
2025-09-16 05:49:43 +02:00 · 2025-09-15 13:24:39 -07:00 · 2025-09-11 19:57:08 +05:30 · 2025-09-11 19:54:14 +05:30 · 2025-09-09 22:16:52 +05:30
3 changed files with 42 additions and 97 deletions
--- a/docs/news/blog.md
+++ b/docs/news/blog.md
@@ -6,6 +6,18 @@

 # Blog

+## [The Essential Guide to Mermaid Chart Plugin for VS Code \[08/2025\]](https://docs.mermaidchart.com/blog/posts/the-essential-guide-to-mermaid-chart-plugin-for-vs-code-08-2025)
+
+9/9/2025 • 5 mins
+
+Creating diagrams in VS Code has never been easier—the Mermaid VS Code plugin transforms text-based syntax into clear, professional visuals right inside your editor. With live previews, smart editing, and AI-powered diagram generation, it removes the friction from visualization so you can focus on coding.
+
+## [How to Create Perfect Flowcharts Using AI in 2025 Step-by-Step Guide](https://docs.mermaidchart.com/blog/posts/how-to-create-perfect-flowcharts-using-ai-in-2025-step-by-step-guide)
+
+7/22/2025 • 8 mins
+
+In 2025, AI tools make creating flowcharts faster and easier than ever. With Mermaid’s AI flowchart generator, you can turn plain text into clear, accurate diagrams in seconds. This guide walks through how it works and how to get the most out of it for technical and business workflows alike.
+
 ## [Mermaid introduces the Visual Editor for Entity Relationship diagrams](https://docs.mermaidchart.com/blog/posts/mermaid-introduces-the-visual-editor-for-entity-relationship-diagrams)

 7/15/2025 • 7 mins
--- a/packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue
+++ b/packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue
@@ -40,105 +40,26 @@ const openSourceFeatures: Feature[] = [
  { iconUrl: '/icons/version-history.svg', featureName: 'Version history' },
 ];

-const playgroundFeatures: Feature[] = [
-  { iconUrl: '/icons/public.svg', featureName: 'Diagram stored in URL' },
-  { iconUrl: '/icons/terminal.svg', featureName: 'Code editor' },
-  { iconUrl: '/icons/whiteboard.svg', featureName: 'Whiteboard' },
+const editorColumns: EditorColumn[] = [
+  {
+    title: 'Mermaid Pro',
+    description: 'Unlock AI and real-time collaboration',
+    highlighted: true,
+    redBarText: 'Recommended',
+    proTrialButtonText: 'Start free trial',
+    proTrialUrl:
+      'https://www.mermaidchart.com/app/sign-up?utm_source=mermaid_js&utm_medium=2_editor_selection&utm_campaign=start_pro&redirect=%2Fapp%2Fuser%2Fbilling%2Fcheckout%3FisFromMermaid%3Dtrue',
+    features: mermaidChartFeatures,
+  },
+  {
+    title: 'Open Source',
+    description: 'Code only, no login',
+    buttonText: 'Start free',
+    redirectUrl: 'https://mermaid.live/edit',
+    features: openSourceFeatures,
+  },
 ];

-const editorColumnVariants: EditorColumn[][] = [
-  [
-    {
-      title: 'Playground',
-      description: 'Basic features, no login',
-      redirectUrl:
-        'https://www.mermaidchart.com/app/sign-up?utm_source=mermaid_js&utm_medium=3_editor_selection_A&utm_campaign=start_playground',
-      buttonText: 'Start free',
-      features: playgroundFeatures,
-    },
-    {
-      title: 'Free or Pro',
-      description: 'Advanced features, Free or Pro account',
-      proTrialUrl:
-        'https://www.mermaidchart.com/app/sign-up?utm_source=mermaid_js&utm_medium=3_editor_selection_A&utm_campaign=start_free',
-      proTrialButtonText: 'Start free',
-      highlighted: true,
-      redBarText: 'Best for collaboration',
-      features: mermaidChartFeatures,
-    },
-    {
-      title: 'Open Source',
-      description: 'Code only, no login',
-      redirectUrl: 'https://mermaid.live/edit',
-      buttonText: 'Start free',
-      features: openSourceFeatures,
-    },
-  ],
-  [
-    {
-      title: 'Mermaid Pro',
-      description: 'Unlock AI and real-time collaboration',
-      redirectUrl:
-        'https://www.mermaidchart.com/app/sign-up?utm_source=mermaid_js&utm_medium=editor_selection_B&utm_campaign=start_free',
-      buttonText: 'Start Free',
-      highlighted: true,
-      redBarText: 'Recommended',
-      proTrialButtonText: 'Start Pro trial',
-      proTrialUrl:
-        'https://www.mermaidchart.com/app/sign-up?utm_source=mermaid_js&utm_medium=editor_selection_B&utm_campaign=start_trial&redirect=%2Fapp%2Fuser%2Fbilling%2Fcheckout%3FisFromMermaid%3Dtrue',
-      features: mermaidChartFeatures,
-    },
-    {
-      title: 'Open Source',
-      description: 'Code only, no login',
-      buttonText: 'Start free',
-      redirectUrl: 'https://mermaid.live/edit',
-      isButtonMargined: true,
-      features: openSourceFeatures,
-    },
-  ],
-  [
-    {
-      title: 'Mermaid Pro',
-      description: 'Unlock AI and real-time collaboration',
-      highlighted: true,
-      redBarText: 'Recommended',
-      proTrialButtonText: 'Start free trial',
-      proTrialUrl:
-        'https://www.mermaidchart.com/app/sign-up?utm_source=mermaid_js&utm_medium=editor_selection_C&utm_campaign=start_trial&redirect=%2Fapp%2Fuser%2Fbilling%2Fcheckout%3FisFromMermaid%3Dtrue',
-      features: mermaidChartFeatures,
-    },
-    {
-      title: 'Open Source',
-      description: 'Code only, no login',
-      buttonText: 'Start free',
-      redirectUrl: 'https://mermaid.live/edit',
-      features: openSourceFeatures,
-    },
-  ],
-  [
-    {
-      title: 'Mermaid Pro',
-      description: 'Unlock AI and real-time collaboration',
-      highlighted: true,
-      redBarText: 'Recommended',
-      proTrialButtonText: 'Start free',
-      proTrialUrl:
-        'https://www.mermaidchart.com/app/sign-up?utm_source=mermaid_js&utm_medium=editor_selection_D&utm_campaign=start_free',
-      features: mermaidChartFeatures,
-    },
-    {
-      title: 'Open Source',
-      description: 'Code only, no login',
-      redirectUrl: 'https://mermaid.live/edit',
-      buttonText: 'Start free',
-      features: openSourceFeatures,
-    },
-  ],
-];
-
-const editorColumns = editorColumnVariants[Math.floor(Math.random() * editorColumnVariants.length)];
-
 const isVisible = ref(false);

 const handleMouseDown = (e: MouseEvent) => {
--- a/packages/mermaid/src/docs/news/blog.md
+++ b/packages/mermaid/src/docs/news/blog.md
@@ -1,5 +1,17 @@
 # Blog

+## [The Essential Guide to Mermaid Chart Plugin for VS Code [08/2025]](https://docs.mermaidchart.com/blog/posts/the-essential-guide-to-mermaid-chart-plugin-for-vs-code-08-2025)
+
+9/9/2025 • 5 mins
+
+Creating diagrams in VS Code has never been easier—the Mermaid VS Code plugin transforms text-based syntax into clear, professional visuals right inside your editor. With live previews, smart editing, and AI-powered diagram generation, it removes the friction from visualization so you can focus on coding.
+
+## [How to Create Perfect Flowcharts Using AI in 2025 Step-by-Step Guide](https://docs.mermaidchart.com/blog/posts/how-to-create-perfect-flowcharts-using-ai-in-2025-step-by-step-guide)
+
+7/22/2025 • 8 mins
+
+In 2025, AI tools make creating flowcharts faster and easier than ever. With Mermaid’s AI flowchart generator, you can turn plain text into clear, accurate diagrams in seconds. This guide walks through how it works and how to get the most out of it for technical and business workflows alike.
+
 ## [Mermaid introduces the Visual Editor for Entity Relationship diagrams](https://docs.mermaidchart.com/blog/posts/mermaid-introduces-the-visual-editor-for-entity-relationship-diagrams)

 7/15/2025 • 7 mins
Author	SHA1	Message	Date
Steph	ad4c227477	add newest blog posts	2025-09-15 13:24:39 -07:00
Sidharth Vinod	450754221e	Merge pull request #6930 from mermaid-js/rajat-ht/chore-editor-selection-update Chore: Simplify editor selection to single version	2025-09-11 19:57:08 +05:30
rajat-ht	7a4f5b62c9	chore: update variable name	2025-09-11 19:54:14 +05:30
rajat-ht	4829dfa8c5	Chore: Simplify editor selection to single version	2025-09-09 22:16:52 +05:30