Merge branch 'main' into feat/srcbookdev#218-Add-AI-generation-to-mar…

…kdown-cells

.changeset/brown-peas-hope.md

@@ -0,0 +1,5 @@
+---
+'@srcbook/web': patch
+---
+
+Improve mermaid rendering

.changeset/tasty-chefs-try.md

@@ -0,0 +1,5 @@
+---
+'@srcbook/api': patch
+---
+
+Update generate Srcbook prompt with mermaid instructions

packages/api/prompts/srcbook-generator.txt

@@ -45,7 +45,10 @@ Create a package.json cell as the second cell. This should specify the dependenc
 </example>
 
 3. Markdown Cells:
-Create markdown cells to explain concepts, provide context, and guide the reader through your srcbook. Use GitHub flavored Markdown syntax. Include relevant headings, lists, and emphasis where appropriate. Do not use heading 1 (reserved for title) or heading 6 (reserved for code block headers). For example:
+Create markdown cells to explain concepts, provide context, and guide the reader through the srcbook. Use GitHub flavored Markdown syntax. Include relevant headings, lists, and emphasis where appropriate. Do not use heading 1 (reserved for title) or heading 6 (reserved for code block headers). If it would be helpful and relevant to the user's ask, you may choose to include a diagram or chart using the Mermaid diagramming and charting tool. To do so, write mermaid syntax in a code block with "mermaid" set as the language identifier.
+
+For example:
+
 <example>
 ## Introduction to websockets
 
@@ -56,6 +59,24 @@ In this srcbook, we'll explore the fundamentals of **websockets** and the ws lib
 - Practical examples
 </example>
 
+Below is an example of using mermaid in a markdown cell:
+
+<example>
+A Bank account could be modeled using classes. For example:
+
+```mermaid
+---
+title: Bank example
+---
+classDiagram
+    class BankAccount
+    BankAccount : +String owner
+    BankAccount : +Bigdecimal balance
+    BankAccount : +deposit(amount)
+    BankAccount : +withdrawal(amount)
+```
+</example>
+
 4. Code Cells:
 Code cells are either JavaScript or TypeScript. They have a unique filename, for example something.js or something.ts respectively for JS or TS. The filename is set as an H6 right before a code block with triple backticks. Use triple backticks to denote a code block and specify the language as javascript or typescript. Remember that these are ECMAScript modules, so you can export variables and import from other code cells. Make sure to never reuse a filename twice. For example:
 <example>

packages/web/src/components/cells/markdown.tsx

@@ -51,14 +51,14 @@ const markdownRenderer = {
   code(snippet: React.ReactNode, lang: string) {
     if (lang === 'mermaid') {
       return (
-        <pre className="mermaid !bg-background" key="mermaid">
+        <pre className="mermaid !bg-background" key={String(snippet)}>
           {snippet}
         </pre>
       );
     }
 
     return (
-      <pre key="code">
+      <pre key={String(snippet)}>
         <code>{snippet}</code>
       </pre>
     );
@@ -126,7 +126,7 @@ export default function MarkdownCell(props: {
   // Initializes mermaid and updates it on theme change
   useEffect(() => {
     mermaid.initialize({
-      startOnLoad: true,
+      startOnLoad: false,
       theme: 'base',
       fontFamily: 'IBM Plex Sans',
       darkMode: theme === 'dark',