1-mermaid-diagram.smd

# 1 - A Mermaid Diagram

This is an example of a prompt to the LLM which resulted in a code block which represents code for a simple diagram. Without knowing the mermaid language, you can ask the LLM to build a diagram for inclusion in your publication. We've shared the result of a prompt in this document for your reference in the "Example" section. Try your own prompt in the "#Try it yourself" section. 

With this file `1-mermaid-diagrams.smd` open in our VSCode plugin, you can click the "Run" button and it will re-run the prompt agains an LLM. This will result in a new version of the diadram being drawn. It may look a little bit different than the one you saw when you first opened the document. 

## Example 

::: create a mermaid horizontal diagram with rectangular boxes of four major steps in the process of photosynthesis >>>


::::: figure

Major Steps of Photosynthesis. The sequential progression from light capture to glucose synthesis, illustrating the four fundamental stages of the photosynthetic process.

```mermaid exec
graph LR
    A[Light Absorption] --> B[Water Splitting]
    B --> C[Energy Conversion]
    C --> D[Carbon Fixation]
    
    
    style A fill:lightyellow
    style B fill:lightblue
    style C fill:pink
    style D fill:lightgray
```

Challenge: 

Looking at the above diagram:
*  Can you figure out how you might change colors of each box?
*  How might you add an arrow from D to A?

Using the LLM to get you started, you can edit and adapt the code block as you learn Mermaid syntax. 

:::::

### Try it yourself 

Tips: 

* Use the keyword "mermaid" which will signal to Stencila to use the mermaid diagram system prompt 
* Be specific about shapes, colors and general visual / stylistic requirements for the diagram
* Prompts can be re-run after you make changes, but results will be overwritten
* When you've reviewed the diagram, you can click "Verify" above the code block to verify the results from the LLM are what you want and then "Accept" to clear the `::: create` prompt and save it to the Stencila provenance store. 

Try running your create your own LLM prompt using the `::: create <prompt text> >>>` tag here: 

2-svg.smd

# 2 - SVG

You can use our inbuilt svg prompt to generate an SVG, Scalable Vector Graphic. SVGs are built up with primative shapes and can

## Example 

::: create svg of a teddy bear >>>

::::: figure

A simple teddy bear drawing showing big round head with small round ears, oval body, and simple facial features drawn with basic shapes.

````svg raw
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <!-- Head -->
  <circle cx="50" cy="35" r="25" fill="#B87A44"/>
  <!-- Ears -->
  <circle cx="30" cy="20" r="10" fill="#B87A44"/>
  <circle cx="70" cy="20" r="10" fill="#B87A44"/>
  <!-- Body -->
  <ellipse cx="50" cy="75" rx="20" ry="15" fill="#B87A44"/>
  <!-- Eyes -->
  <circle cx="40" cy="30" r="4" fill="black"/>
  <circle cx="60" cy="30" r="4" fill="black"/>
  <!-- Nose -->
  <circle cx="50" cy="40" r="3" fill="#8B4513"/>
  <!-- Mouth -->
  <path d="M45 45 Q50 48 55 45" stroke="#8B4513" fill="none"/>
</svg>
````

:::::


### Challenge

* Can you figure out how to change the colors of the ears to "saddlebrown"? (hint they're circles)
* Now move the ears to be drawn first, hint each element is drawn in its own layer, in order of appearance in the SVG code


## Try it yourself 

Tips: 

* Describe in detail how you'd like the diagram to appear. 
* SVGs are built from primative elements, sometimes language models aren't great at drawing coherent things for complex prompts, so keep it simple. 

Try running your create your own LLM prompt using the `::: create <prompt text> >>>` tag here and make sure to include the keyword "svg":