add docs and changeset

Author: aruncveli

.changeset/eager-cobras-slide.md

@@ -0,0 +1,7 @@
+---
+'mermaid': minor
+---
+
+feat: add datastore shape for flowchart
+
+In Data flow diagrams, a datastore/warehouse/file/database is used to represent data persistence. It is denoted by a rectangle with top and bottom border. This change adds that as a shape in flowcharts.

demos/dataflowchart.html

@@ -18,20 +18,7 @@ <h1>Data Flow Diagram demos</h1>
     flowchart LR
       accTitle: A simple linear flowchart.
       accDescr: A Database has input to a circle System has output to a square Customer.
-      DataStore[|borders:tb|Database] -->|input| Process((System)) -->|output| Entity[Customer];
-    </pre>
-
-    <hr />
-
-    <h2>Borders Example</h2>
-    <pre class="mermaid">
-    flowchart TD
-      allSides[ stroke all sides ];
-      allSides2[|borders:ltrb| stroke all sides ];
-      rbSides[|borders:rb| stroke right and bottom sides ];
-      ltSides[|borders:lt| stroke left and top sides ];
-      lrSides[|borders:lr| stroke left and right sides ];
-      noSide[|borders:no| stroke no side ];
+      DataStore@{shape: datastore, label: "Datastore"} -->|input| Process((System)) -->|output| Entity[Customer];
     </pre>
 
     <script type="module">

docs/syntax/flowchart.md

@@ -527,6 +527,18 @@ flowchart TD
     A@{ shape: lean-l, label: "Output/Input" }
 ```
 
+### Datastore (Top and bottom border)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: datastore, label: "Datastore" }
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: datastore, label: "Datastore" }
+```
+
 ### Priority Action (Trapezoid Base Bottom)
 
 ```mermaid-example

packages/mermaid/src/docs/syntax/flowchart.md

@@ -307,6 +307,13 @@ flowchart TD
     A@{ shape: lean-l, label: "Output/Input" }
 ```
 
+### Datastore (Top and bottom border)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: datastore, label: "Datastore" }
+```
+
 ### Priority Action (Trapezoid Base Bottom)
 
 ```mermaid-example