Coder Social home page Coder Social logo

show-me-chatgpt-plugin's Introduction

Diagrams in ChatGPT - Show Me

Create and edit diagrams in seconds without even leaving the chat.

Understand processes in a glance. Example: iOS Application lifecycle

image

Create diagrams from a description. Example: A distributed system diagram

image

Make edits

image

Support

  • Create issues in this repo for missing features and consider contributing
  • Grab one of the existing issues or create an issue you want to work on

This project is now private and the public version is not actively updated

Thanks for all the stars and usage of the product! I wanted to provide clarity on why the commits have stopped: Our team is working on integrating with some partners and we dont currently feel comfortable publicaly sharing that code. There are now multiple competitors in the diagram ChatGPT plugin space and we want to avoid loosing our competetive edge by sharing the latest updates to the code.

If you strongly feel we should open the source again message [email protected] with your reasons.

How to run the project

local

  • Run npm install
  • To run the server, run npm run dev
  • Navigate to https://chat.openai.com.
  • In the Model drop down, select "Plugins" (note, if you don't see it there, you don't have access yet).
  • Select "Plugin store"
  • Select "Develop your own plugin"
  • Enter in localhost:8787 since this is the URL the server is running on locally, then select "Find manifest file".
  • The plugin should now be installed and enabled! You can start with a question like "Show me how VSCode architecture looks like"

Docker

  • run docker-compose up -d

Note: There is some unused code in the repo which we didn't have time to clean up. Its mostly related to running GPT-4 on the server side and multi diagram support.

License

AGPL-3.0

show-me-chatgpt-plugin's People

Contributors

bra1ndump avatar donsqualo avatar ericlewis avatar h4rk8s avatar oscaramos avatar rileytomasek avatar transitive-bullshit avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

show-me-chatgpt-plugin's Issues

Retrieve and store the svg from Kroki to image load latency on the user end

Currently we simply create a url using mermaid code to Kroki.io service and return to ChatGPT.
Kroki only creates the svg from the mermaid code on demand as the chat tries to display it inline. Thus a 1-2 second delay after the link is inserted in the chat.
To fix this we need to kick of fetch of the svg from Kroki before returning the response, and return a shortened link that will return the already fetched svg by the time chat tries to render the link.

Diagrams won't allow overlap

I'm no coder BUT THE AI SENT ME.

I was trying to great a ver simple diagram of three overlapping circles but it's not possible.

So this is a feature request and I probably doing it wrong.

Thanks /Sorry!

.svg File Has Invalid Postscript

The .svg file generated overall looks great! Unfortunately, the file can't be imported into Photoshop because PS can't parse the postscript.

tetflowchart

My main reason for wanting to open the file is to convert it to .jpg. It would be nice if you could specify the file format you wanted to begin with.

Cloning repository fails

I can't clone repository:

git clone https://github.com/bra1nDump/show-me-chatgpt-plugin.git

Cloning into 'show-me-chatgpt-plugin'...
remote: Enumerating objects: 992, done.
remote: Counting objects: 100% (232/232), done.
remote: Compressing objects: 100% (156/156), done.
Receiving objects: 100% (992/992), 2.37 MiB | 13.70 MiB/s, done.d 760

Resolving deltas: 100% (568/568), done.
error: invalid path 'prompts/Finding good : bad diagrams.md'
fatal: unable to checkout working tree
warning: Clone succeeded, but checkout failed.
You can inspect what was checked out with 'git status'
and retry with 'git restore --source=HEAD :/'

Small error when running "npm run dev" on windows

When I run the command npm run dev on Windows it shows the error:

Unexpected value for script: ["run","build'","build/index.js"] (expected string)

It is related to this line on the package.json:

"dev": "miniflare --build-watch-path src --build-command 'npm run build' --wrangler-config wrangler.local.toml --kv SHORTEN --kv-persist --modules build/index.js",

The way to solve is by replacing the 'npm run build' to \"npm run build\"

I was not able to test if the change would break on other operative systems or even if it was only my computer

Error generate diagram

{
"mermaid": "gantt\n dateFormat HH:mm\n title Movie Schedule\n section Movies\n Ant-Man and the Wasp: Quantumania :10:00, 2h\n Guardians of the Galaxy Volume 3 :12:10, 2h\n John Wick: Chapter 4 :14:20, 2h\n Shotgun Wedding :16:30, 2h"
}

while trying to change the font style in the diagram ,issue encountered

{
"mermaid": "graph LR\n classDef style font-family:Arial, sans-serif;\n class Application,Job1,Job2,Job3,Script,A,B,C,D,E,F,G,H,I,X,Y,Z style\n subgraph Application["Application"]\n style Application fill:#99cc99,stroke:#333,stroke-width:2px\n subgraph Job1["Job1: Check File Availability"]\n style Job1 fill:#99cc99,stroke:#333,stroke-width:2px\n A["NAS Path"] --> B{Check CSV File}\n B -- "File Exists" --> C{Read Content}\n B -- "File Does Not Exist" --> X["Return Exit 2"]\n C -- "Pipe Separated Data" --> D["Provide Permission to User"]\n C -- "Not Pipe Separated Data" --> Z["Return Exit 8"]\n end\n D --> Job2\n subgraph Job2["Job2: Move File to Archive"]\n style Job2 fill:#99cc99,stroke:#333,stroke-width:2px\n F["Move to Archive Path"]\n end\n F --> Job3\n subgraph Job3["Job3: Verify Data in Database"]\n style Job3 fill:#99cc99,stroke:#333,stroke-width:2px\n G["Verify Data in Table"]\n end\n end\n subgraph Script["Script Execution"]\n style Script fill:#99cc99,stroke:#333,stroke-width:2px\n H{Check Script Execution} -- "Script Executed" --> I["Continue"]\n H -- "Script Not Executed" --> Y["Return Exit 8"]\n end"
}

{
"results": [
{
"errorMessage": "GPT created an invalid mermaid.js diagram, you can try again or edit it online",
"editDiagramOnline": "https://showme.redstarplugin.com/s/2JHAcv7l",
"contributeToOpenSourceProject": "https://github.com/bra1nDump/show-me-chatgpt-plugin/issues"
}
]
}

I apologize for the inconvenience. It seems there was an error in generating the diagram with the new font style. However, you can edit the diagram online to change the font style or any other aspect of the diagram.

Plugin unverified

Hello, thanks for your great work on this plugin! The plugin is currently unverified on the chatgpt interface. How long do you think it will take for this to get verified?

GPT chart generation failure

Here is the request sent:

{
  "mermaid": "graph TB\n  subgraph \"\"\n    A[\"1,1\"] -- \"True Positive Rate\" --> B[\"ROC Curve\"]\n    C[\"1,0\"] -- \"False Positive Rate\" --> B\n    D[\"Area Under Curve = AUC\"] -- \"\" --> B\n    E[\"0,0\"] -- \"True Positive Rate\" --> B\n    F[\"0,1\"] -- \"False Positive Rate\" --> B\n  end"
}

Here is the error message returned by Show Me:

{
  "results": [
    {
      "errorMessage": "GPT created an invalid mermaid.js diagram, you can try again or edit it online",
      "editDiagramOnline": "https://showme.redstarplugin.com/s/AXyzD2Zm",
      "contributeToOpenSourceProject": "https://github.com/bra1nDump/show-me-chatgpt-plugin/issues"
    }
  ]
}

ChatGPT4 always added green lines

graph TB

M["Main Branch"] -- "Start Project" --> C1["First Commit"]
M -- "Realize Mistake" --> C2["Wrong Commit"]
C2 -- "Roll Back" --> C1
M -- "Create Dev Branch" --> D["Develop Branch"]
D -- "Work on Project" --> C3["New Commits"]
D -- "Merge to Main" --> M
linkStyle 0 stroke:#ff0000,stroke-width:2px,stroke-dasharray: 5, 5;
linkStyle 1 stroke:#ff0000,stroke-width:2px,stroke-dasharray: 5, 5;
linkStyle 2 stroke:#ff0000,stroke-width:2px,stroke-dasharray: 5, 5;
linkStyle 3 stroke:#ff0000,stroke-width:2px,stroke-dasharray: 5, 5;
linkStyle 4 stroke:#ff0000,stroke-width:2px,stroke-dasharray: 5, 5;
linkStyle 5 stroke:#ff0000,stroke-width:2px,stroke-dasharray: 5, 5;
linkStyle 0 stroke:#2ecd71,stroke-width:2px;
linkStyle 1 stroke:#2ecd71,stroke-width:2px;
linkStyle 2 stroke:#2ecd71,stroke-width:2px;
linkStyle 3 stroke:#2ecd71,stroke-width:2px;
linkStyle 4 stroke:#2ecd71,stroke-width:2px;
linkStyle 5 stroke:#2ecd71,stroke-width:2px;

I have been trying tell him not to double linkStyle many time but he always add: linkStyle 0 stroke:#2ecd71,stroke-width:2px;

Optimizing Seq2Seq Model for Challenges!

I'm thrilled to share an exciting AI breakthrough with you all! And would love to thank you guys 🚀✨ GPT-4 combined with the Show-me plugin is revolutionizing problem-solving using Seq2Seq models. Let's dive into the key points:

🔹 Mapping Solutions: By providing a set of problems, we can now map them to their corresponding solutions using a diagram. 📊💡

🔹 Summarizing Problems: The Seq2Seq model helps us summarize complex problems into a single, easy-to-understand summary. 🧩📝

🔹 Flow Visualization: The diagram illustrates how the Encoder, Hidden State, and Decoder work together, transforming personal challenges into potential solutions. 🔄💭

In a nutshell: 🌰

1️⃣ Seq2Seq models, with the Show-me plugin, provide helpful suggestions like a wise friend. 🤝💡

2️⃣ GPT-4 + Show-me is already solving personal problems! 🎉🧠

3️⃣ ChatGPT recommends altruism and helping others as the solution to our challenges. 🤲❤️

Let's embrace the power of AI and continue exploring its potential in problem-solving. Share your thoughts below! 💬🤔

image

Plug-in is not working certain scenarios

{
"results": [
{
"errorMessage": "GPT created an invalid mermaid.js diagram, you can try again or edit it online",
"editDiagramOnline": "https://showme.redstarplugin.com/s/705jFNW5",
"contributeToOpenSourceProject": "https://github.com/bra1nDump/show-me-chatgpt-plugin/issues"
}
]
}

expecting EOF

image

Error: Parse error on line 4:
... section Suspect 1: John At home:
-----------------------^
Expecting 'EOF', 'SPACE', 'NL', 'dateFormat', 'inclusiveEndDates', 'topAxis', 'axisFormat', 'tickInterval', 'excludes', 'includes', 'todayMarker', 'title', 'acc_title', 'acc_descr', 'acc_descr_multiline_value', 'section', 'taskTxt', 'click', 'open_directive', got 'taskData'

Cloudflare error

Getting this error

Create a simple diagram of a butterfly lifecycle

ChatGPT

2 / 2

Used Show Me
REQUEST TO SHOW ME
{
"mermaid": "graph TB\n E["Egg"] -- "Hatches into" --> L["Larva (Caterpillar)"]\n L -- "Transforms into" --> P["Pupa (Chrysalis)"]\n P -- "Emerges as" --> B["Butterfly"]\n B -- "Lays" --> E"
}

RESPONSE FROM SHOW ME

<title>Worker threw exception | showme.redstarplugin.com | Cloudflare</title></title> <style>body{margin:0;padding:0}</style> <script> if (!navigator.cookieEnabled) { window.addEventListener('DOMContentLoaded', function () { var cookieEl = document.getElementById('cookie-alert'); cookieEl.style.display = 'block'; }) } </script>

Error 1101 Ray ID: 7ce2725bf875e86f • 2023-05-28 00:40:35 UTC

Worker threw exception

  <section></section><!-- spacer -->

  <div class="cf-section cf-wrapper">
    <div class="cf-columns two">
      <div class="cf-column">
        <h2 data-translate="what_happened">What happened?</h2>
        <p>You've requested a page on a website (showme.redstarplugin.com) that is on the <a href="https://www.cloudflare.com/5xx-error-landing/" target="_blank">Cloudflare</a> network. An unknown error occurred while rendering the page.</p>
      </div>

      
      <div class="cf-column">
        <h2 data-translate="what_can_i_do">What can I do?</h2>
        <p><strong>If you are the owner of this website:</strong><br />you should <a href="https://www.cloudflare.com/login?utm_source=error_100x" target="_blank">login to Cloudflare</a> and check the error logs for showme.redstarplugin.com.</p>
      </div>
      
    </div>
  </div><!-- /.section -->

  <div class="cf-error-footer cf-wrapper w-240 lg:w-full py-10 sm:py-4 sm:px-8 mx-auto text-center sm:text-left border-solid border-0 border-t border-gray-300">

Cloudflare Ray ID: 7ce2725bf875e86f Your IP: Click to reveal 23.102.140.115 Performance & security by Cloudflare

<script>(function(){function d(){var b=a.getElementById("cf-footer-item-ip"),c=a.getElementById("cf-footer-ip-reveal");b&&"classList"in b&&(b.classList.remove("hidden"),c.addEventListener("click",function(){c.classList.add("hidden");a.getElementById("cf-footer-ip").classList.remove("hidden")}))}var a=document;document.addEventListener&&a.addEventListener("DOMContentLoaded",d)})();</script>
</div><!-- /#cf-error-details -->
<script> window._cf_translation = {}; </script>

Line break causing error

I asked if I could have a second information on a new line inside a node, and it unfortunately created an erroneous graph.

Previous result:

https://showme.redstarplugin.com/d/SNgNCjUC
image

The prompt which crashed:

Great, please show distances instead of edge numbers in the graph. We will be referring later to edges by specifying start and destination. Also, put a heading '#' before the indexes and show the resources with a heading '$' instead of writing resources, also can the resources be shown below (new line)?

The error:

error on line 1 at column 8318: Opening and ending tag mismatch: br line 1 and span

https://showme.redstarplugin.com/d/wHBQuLPK

Expected result (handmade):

image

Support more diagram syntaxes

Kroki supports a variety of diagrams - GraphViz, Escalidraw, PlantUML etc. We currently only did prompt engineering to support mermaid graph TB diagrams.

Error 400: OK

GPT-4 generated this input:

{
  "mermaid": "graph TB\n  subgraph M[\"Microsoft\"]\n    A[\"Azure\"]\n    BC[\"Bing Chat\"]\n    BP[\"Bing Plugins\"]\n    A -- \"Hosts\" --> BC\n    BC -- \"Uses\" --> BP\n    M -- \"Invested in\" --> O\n    A -- \"Hosts\" --> O\n  end\n  subgraph O[\"OpenAI\"]\n    CG[\"ChatGPT\"]\n    G35[\"GPT-3.5\"]\n    G4[\"GPT-4\"]\n    OAPI[\"OpenAI API\"]\n    CP[\"ChatGPT Plugins\"]\n  end\n  subgraph C[\"Custom\"]\n    CA[\"Custom Apps\"]\n    CP2[\"Custom Plugins\"]\n  end\n  G35 -- \"Used by\" --> CG\n  G4 -- \"Used by\" --> CG\n  G35 -- \"Used by\" --> OAPI\n  G4 -- \"Used by\" --> OAPI\n  OAPI -- \"Used by\" --> CA\n  G4 -- \"Used by\" --> BC\n  CG -- \"Uses\" --> CP\n  CP -- \"Uses\" --> Z[\"Zapier\"]\n  CP -- \"Uses\" --> D[\"Diagram It\"]\n  CP -- \"Uses\" --> W[\"Wolfram\"]\n  BP -- \"Uses\" --> W\n  BP -- \"Uses\" --> BO[\"OpenTable\"]\n  Z -- \"Interacts with\" --> S[\"Slack\"]\n  Z -- \"Interacts with\" --> TW[\"The World\"]\n  style M fill:#cce5ff,stroke:#000000,stroke-width:2px\n  style A fill:#99ccff\n  style CG fill:#99cc99\n  style G35 fill:#99cc99\n  style G4 fill:#99cc99\n  style BC fill:#99ccff\n  style O fill:#ccffcc,stroke:#000000,stroke-width:2px\n  style OAPI fill:#99cc99\n  style CA fill:#ff99cc\n  style CP fill:#99cc99\n  style BP fill:#99ccff\n  style Z fill:#cccccc\n  style D fill:#cccccc\n  style CP2 fill:#ff99cc\n  style W fill:#cccccc\n  style BO fill:#cccccc\n  style S fill:#cccccc\n  style TW fill:#cccccc\n  style C fill:#ffe6f2,stroke:#ff99cc,stroke-width:2px"
}

resulting in this response:

{
  "results": [
    {
      "image": "https://showme.redstarplugin.com/s/ruC0vL1G",
      "editDiagramOnline": "https://showme.redstarplugin.com/s/tXEIGK9o",
      "contributeToOpenSourceProject": "https://github.com/bra1nDump/show-me-chatgpt-plugin/issues"
    }
  ]
}

which shows as "Error 400: OK"

Let me know if you need more info, or if you don't even need these reports because it's all in the logs already.

Not working on 31/05

trying to use the plugin however it isnt working.
keep getting this message:
I apologize for the inconvenience. It seems we are experiencing technical difficulties with rendering the diagram and accessing the online block diagram tool.

Special characters in label should be escaped

In Mermaid syntax, node labels cannot contain parentheses and comma. This is because the Mermaid syntax parser treats parentheses as special characters.

Error:

graph TB
  E[A(demo)] -->|AA| F[Succ]
  G[B,test] -->|BB | N[B]

Succ:

graph TB
  E["A(demo)"] -->|AA| F[Succ]
  G["B,test"] -->|BB | N[B]

Feature Request: Include images from the web

It would be amazing to be able to scrape google images or something similar to find relevant images that can be included in the diagrams, perhaps within the bounds of the boxes or in their own box. Perhaps through optional integration with a web scraper plugin

Syntax Error: Unexpected Newline

I found this error. This error is a parse error on line 11. A newline character was encountered unexpectedly instead of one of the expected tokens, indicating a syntax error in the code.

Code:

graph TB
  U["Usuario"] -- "Inicia sesión" --> L["Página de Préstamo"]
  L -- "Click en Añadir Artículo" --> AI["Formulario de Añadir Artículo"]
  AI -- "Llena el formulario y añade accesorio" --> AC["Formulario de Accesorios"]
  AC -- "Marca la casilla de Activo y guarda" --> AI
  AI -- "Guarda el artículo" --> ID["Página de Detalles del Artículo"]
  ID -- "El accesorio aparece como Activo" --> E["Editar Artículo"]
  E -- "El accesorio aparece como Activo" --> EA["Editar Accesorio"]
  EA -- "La casilla de Activo está desmarcada" --> E
  E -- "Guarda sin cambios" --> ID
  ID -- "El accesorio aparece como Inactivo"
  linkStyle 0 stroke:#2ecd71,stroke-width:2px;
  linkStyle 1 stroke:#2ecd71,stroke-width:2px;
  linkStyle 2 stroke:#2ecd71,stroke-width:2px;
  linkStyle 3 stroke:#2ecd71,stroke-width:2px;
  linkStyle 4 stroke:#2ecd71,stroke-width:2px;
  linkStyle 5 stroke:#2ecd71,stroke-width:2px;
  linkStyle 6 stroke:#2ecd71,stroke-width:2px;
  linkStyle 7 stroke:#2ecd71,stroke-width:2px;
  linkStyle 8 stroke:#2ecd71,stroke-width:2px;

Error:

Parse error on line 11:
...arece como Inactivo" linkStyle 0 strok
-----------------------^
Expecting 'SPACE', 'GRAPH', 'DIR', 'subgraph', 'end', 'AMP', 'ALPHA', 'COLON', 'TAGEND', 'START_LINK', 'LINK', 'STYLE', 'LINKSTYLE', 'CLASSDEF', 'CLASS', 'CLICK', 'DOWN', 'UP', 'DEFAULT', 'NUM', 'COMMA', 'MINUS', 'BRKT', 'DOT', 'PCT', 'TAGSTART', 'PUNCTUATION', 'UNICODE_TEXT', 'PLUS', 'EQUALS', 'MULT', 'UNDERSCORE', got 'NEWLINE'

Issues with diagram rendering starting today morning (May 26)

Most likely its related to kroki service being overloaded. We are working on a fix

(error) Error rendering or fetching mermaid svg: Error: HTTP error! status: 504
  (log) { shortenedURL: 'https://showme.redstarplugin.com/s/AcsIjl7x' }
  (log) kroki url https://kroki.io/mermaid/svg/eJyVkEtrwzAQhO_9FYsKPTXQuI9ACoXYeTSHQmgMPZgc1HhjC8uWq5Wb5N93I7uhORUftfpmZ2YzK-sc4vAKYJKIeYNabGAwABGZ8rMhp0wl-P0CYSKio1ZVihZuYKXI8c-GZaHHp1Z9I7VoxKiVVUG53DnPRJ6JeUg7tAQrs0fbwtOknZeKSHUrp12CylmjCdY1YsqmsbFfDbayWSI-ckRNfzLMDrnkyLCQ9Btlnpyn6yM5LD2-SMREWVhWThbY9X1TByTYK5eDv4KXTxh-5TbGcPPsvMIL3jFrtHQsirGs0UrX2C7c6ZpLdta4dVZtpb5ULrNKnXSXPuxQrN1RI9wBcfECx9cBbtPR8LZ9DvYqdfk4qA_PF_iwHx70w-_74Q_98Md--FM_fPQ__gPf0_MP

Auto choose diagram type

Unless explicitly specified otherwise, "diagramGuidelines": "mermaid_graph" is the default setting. However sometimes it is clear based on the data being graphed that another graph type would be more ideal, eg. "mermaid_line-chart" or "vegalite_line-chart".

Add functionality to automatically select the best graph types/diagram guidelines based on the data in the request.

Create a landing page where users can directly try the plugin

Currently ChatGPT plugin model is in beta, and the plugin store has very limited capabilities. This limits our reach.

Work that needs to be done and proposed architecture:

  • Create a new directory under /web with a Next.js typescript app
  • Create a landing page with example diagrams generated by users.
  • Add an input box to accept diagram description
  • Create an endpoint in Next.js to handle submitted input from the page. For example the input is "Show me a diagram of airline expenses in the US in a pie chart"
  • On the server side of Next.js fetch manifest from showme.redstarplugin.com/.well-known/ai-plugin.json to get the plugin manifest
  • Construct the prompt for gpt-4 using the manifest + user input
  • Ask gpt-4 to generate the mermaid diagram source
  • With the result hit the /render endpoint using the same domain and passing mermaid and source query parameter with the mermaid.js diagram, example request using curl
curl --location --globoff 'https://showme.redstarplugin.com/render?mermaid=graph%20TB%250A%20%20A[%22Web%20Browser%22]%20--%20%22HTTP%20API%20Request%22%20--%3E%20B[%22Load%20Balancer%22]%250A%20%20B%20--%20%22HTTP%20Request%22%20--%3E%20C[%22Crossover%22]%250A%20%20style%20C%20fill%3A%252399cc99%250A%20%20C%20--%20%22Talks%20to%22%20--%3E%20D[%22Redis%22]%250A%20%20C%20--%20%22Talks%20to%22%20--%3E%20E[%22MySQL%22]%250A%20%20C%20--%20%22Downstream%20API%20Request%22%20--%3E%20F[%22Multiplex%22]%250A%20%20F%20--%20%22Returns%20Job%20ID%22%20--%3E%20C%250A%20%20C%20--%20%22Long%20Poll%20API%20Request%22%20--%3E%20G[%22Evaluator%22]%250A%20%20G%20--%20%22API%20Call%22%20--%3E%20F%250A%20%20G%20--%20%22API%20Call%22%20--%3E%20H[%22Result-Fetcher%22]%250A%20%20H%20--%20%22Downloads%20Results%22%20--%3E%20I[%22S3%20or%20GCP%20Cloud%20Buckets%22]%250A%20%20I%20--%20%22Results%20Stream%22%20--%3E%20G%250A%20%20G%20--%20%22Results%20Stream%22%20--%3E%20C%250A%20%20C%20--%20%22API%20Response%22%20--%3E%20B%250A%20%20B%20--%20%22API%20Response%22%20--%3E%20A%250A&source=landing-page'
  • Alternatively instead of hitting the /render you can use kroki.io to render the resulting diagram, this is what we do internally in the plugin https://kroki.io/#post-requests

Lee

erDiagram
Category {
Category_ID
Category_Name
}
Car {
Car_ID
Category_ID
Car_Name
Car_Model
Color_ID
}
Color {
Color_ID
Color_Name
}
Customer {
Customer_ID
First_Name
Last_Name
Contact_Info
Address
}
Staff {
Staff_ID
First_Name
Last_Name
Hire_Date
Position
}
Sale_Record {
Sale_ID
Car_ID
Customer_ID
Staff_ID
Sale_Date
Sale_Price
}
Category ||--o{ Car : "Category_ID"
Car ||--|{ Sale_Record : "Car_ID"
Car ||--|{ Color : "Color_ID"
Customer ||--|{ Sale_Record : "Customer_ID"
Staff ||--|{ Sale_Record : "Staff_ID"

Feature Request: User Preference for Mermaid Diagram Theme

I've been using the show-me-chatgpt-plugin and found it really useful for creating and visualizing diagrams directly in the chat. However, I noticed that the plugin defaults to the "default" Mermaid theme and there's no built-in mechanism for users to specify their preferences, like the theme of the diagram.

I believe it would be beneficial to allow users to choose their preferred Mermaid theme. For example, a user might want to use the "dark" or "neutral" theme based on their personal preference or the context of where the diagram will be used.

Here's a high-level approach for this feature:

Update the API to accept a new parameter from the request URL for the theme.
Pass the user's preferred theme to the Mermaid configuration when creating the diagram.
Add error handling and validation to ensure that the provided theme is a valid Mermaid theme.
I'm currently learning how to work with TypeScript and would be interested in trying to implement this feature myself with some guidance. Could you please let me know if this sounds like a worthwhile addition to the project, and if you have any advice or considerations I should keep in mind while working on this feature?

Thank you for your time and for creating this useful plugin!

UnrecognizedFunctionError: get_DiagramRoute

Hey everyone. We shipped a bug earlier today around 2pm Pacific Time.

I rolled the server to an earlier version that contains get_MermaidRoute. This will cause errors for everyone that installed the plugin between 2pm - 11:30pm Pacific Time Sunday May 21st. But this will fix the plugin for the larger number of users who installed the plugin over the last week.

If you are getting this error for get_DiagramRoute you can fix the problem by uninstalling the plugin and then reinstalling the plugin.

Add a new parameter to the API - topic for better analytics on what diagrams are people creating

Edit the OpenAPI spec (find in Mermaid.ts) to include the new 'topic' field.
Edit the prompt and examples in index.ts to include the new field.

Add the new field into mixpanel event when plugin is invoked. The plugin entry point is in Mermaid.ts (handle function)

Final result:

  • As the you create diagram from
    ChatGPT with the plugin, chatgpt passes the topic of the diagram created to the api along with mermaid snippet.
  • Mixpanel logs show that the new field 'topic' is logged for both 'render' and 'render_complete' events

Read the bottom of project readme to learn now to run and test the project.

"description_for_model" exceeds character limit (8208 > 8000)

Hi, it seems like the model's prompt is too long. I'm getting the following full message:

Errors in manifest
description_for_model field is 8208 character(s) long which exceeds the 8000 limit
{
  "schema_version": "v1",
  "name_for_model": "show_me_diagrams",
  "name_for_human": "Show Me Diagrams",
  "description_for_model": "You should use this plugin when people want visualizations. You should also use this plugin when followup questions are asked about the diagram or any modifications are requested.\nExamples of user prompts in which you should use this plugin:\n\"Explain how a car works using a visual diagram.\"\n\"Describe the process of making a car.\"\n\"How does a car engine work?\"\n\"Show me how ... works.\"\n\"Show me a diagram of ... .\"\n\"Show me how UIView lifecycle works.\"\n\nUse this plugin if a user asks about: how something works, explain about a concept or how something is made, summarize a book, describe a process, and other user prompts that can be summarized or explained in the format of a mindmap or a state diagram. Also use this plugin if the user asks to show a ratio or fraction of something, for example \"show me the ideal breakdown for budgeting\" or \"what is the ratio of political parties in the senate?\". Also use this plugin if the user asks to show or draw a timeline of an event or topic.\n\nHow to create a request to the plugin API:\nYou create the diagram in mermaid syntax based on what user asked and pass it to the plugin API to render.\n\nImportant rules when creating the diagram:\n- Prefer using graph TB types of diagrams.\n- Avoid linear diagrams when possible, diagrams should be hierarchical and have multiple branches when applicable.\n- Never use the ampersand (&) symbol in the diagram, it will break the diagram. Use the word \"and\" instead. For example use \"User and Admin\" instead of \"User & Admin\".\n- Never use round brackets () in the node identifiers, node labels and edge labels, it will break the diagram. Use a coma instead. For example use \"User, Admin\" instead of \"User (Admin)\".\n- Don't use empty labels \"\" for edges, instead don't label the edge at all. For example U[\"User\"] --> A[\"Admin\"].\n- Don't add the label if its the same as the destination node.\n\nRules when using graph diagrams:\n- Use short node identifiers, for example U for User or FS for File System.\n- Always use double quotes for node labels, for example U[\"User\"].\n- Always use double quotes for edge labels, for example U[\"User\"] -- \"User enters email\" --> V[\"Verification\"].\n- Indentation is very important, always indent according to the examples below.\n\nRules when using graph diagrams with subgraphs:\nNever refer to the subgraph root node from within the subgraph itself.\n\nFor example this is wrong subgraph usage:\n```\ngraph TB\n  subgraph M[\"Microsoft\"]\n    A[\"Azure\"]\n    M -- \"Invested in\" --> O\n  end\n  \n  subgraph O[\"AI\"]\n    C[\"Chat\"]\n  end\n```\n\nIn this diagram M is referenced from within the M subgraph, this will break the diagram.\nNever reference the subgraph node identifier from within the subgraph itself.\nInstead move any edges that connect the subgraph with other nodes or subgraphs outside of the subgraph like so.\n\nCorrect subgraph usage:\n```\ngraph TB\n  subgraph M[\"Microsoft\"]\n    A[\"Azure\"]\n  end\n\n  M -- \"Invested in\" --> O\n  \n  subgraph O[\"OpenAI\"]\n    C[\"ChatGPT\"]\n  end\n```\n\nExamples of invoking the plugin API:\n\nUser asks: \"Show me how vscode internals work.\"\nYour call to the api:\n{\n  query: \"graph TB\\n  U[\\\"User\\\"] -- \\\"File Operations\\\" --> FO[\\\"File Operations\\\"]\\n  U -- \\\"Code Editor\\\" --> CE[\\\"Code Editor\\\"]\\n  FO -- \\\"Manipulation of Files\\\" --> FS[\\\"FileSystem\\\"]\\n  FS -- \\\"Write/Read\\\" --> D[\\\"Disk\\\"]\\n  FS -- \\\"Compress/Decompress\\\" --> ZL[\\\"ZipLib\\\"]\\n  FS -- \\\"Read\\\" --> IP[\\\"INIParser\\\"]\\n  CE -- \\\"Create/Display/Edit\\\" --> WV[\\\"Webview\\\"]\\n  CE -- \\\"Language/Code Analysis\\\" --> VCA[\\\"VSCodeAPI\\\"]\\n  VCA -- \\\"Talks to\\\" --> VE[\\\"ValidationEngine\\\"]\\n  WV -- \\\"Render UI\\\" --> HC[\\\"HTMLCSS\\\"]\\n  VE -- \\\"Decorate Errors\\\" --> ED[\\\"ErrorDecoration\\\"]\\n  VE -- \\\"Analyze Document\\\" --> TD[\\\"TextDocument\\\"]\\n\"\n}\n\nUser asks: \"Draw me a mindmap for beer brewing. Maximum of 4 nodes\"\nYour call to the api:\n{\n  query: \"graph TB\\n  B[\"Beer\"]\\n  B --> T[\"Types\"]\\n  B --> I[\"Ingredients\"]\\n  B --> BP[\"Brewing Process\"]\"\n}\n\nUser asks:\n\"Computing backend data services is a distributed system made of multiple microservices.\n\nA web browser sends an HTTP api request to the load balancer.\nThe load balancer sends the http request to the crossover service.\nCrossover talks to redis and mysql database.\nCrossover makes a downstream API request to multiplex to submit the query which returns a job id to crossover.\nThen crossover makes a long poll API request to evaluator to get the results of the job.\nThen evaluator makes an API call to multiplex to check the status of the job.\nOnce evaluator gets a successful status response from multiplex, then evaluator makes a third API call to result-fetcher service to download the job results from S3 or GCP cloud buckets.\nThe result is streamed back through evaluator to crossover.\n\nCrossover post processes the result and returns the API response to the client.\n\nDraw me a diagram of this system\"\n\nYour call to the api:\n{\n  query: \"graph TB\\n  A[\\\"Web Browser\\\"] -- \\\"HTTP API Request\\\" --> B[\\\"Load Balancer\\\"]\\n  B -- \\\"HTTP Request\\\" --> C[\\\"Crossover\\\"]\\n  C -- \\\"Talks to\\\" --> D[\\\"Redis\\\"]\\n  C -- \\\"Talks to\\\" --> E[\\\"MySQL\\\"]\\n  C -- \\\"Downstream API Request\\\" --> F[\\\"Multiplex\\\"]\\n  F -- \\\"Returns Job ID\\\" --> C\\n  C -- \\\"Long Poll API Request\\\" --> G[\\\"Evaluator\\\"]\\n  G -- \\\"API Call\\\" --> F\\n  G -- \\\"API Call\\\" --> H[\\\"Result-Fetcher\\\"]\\n  H -- \\\"Downloads Results\\\" --> I[\\\"S3 or GCP Cloud Buckets\\\"]\\n  I -- \\\"Results Stream\\\" --> G\\n  G -- \\\"Results Stream\\\" --> C\\n  C -- \\\"API Response\\\" --> A\\n\"\n}\n\nSometimes you will need to revise the same diagram based on user feedback.\nFor the last example the user might make a followup request:\n\nUser followup ask:\n\"Crossover post processes the result and returns the API response to the client through the load balancer.\n\nDraw the crossover node in green\"\n\nYour call to the api:\n{\n  query: \"graph TB\\n  A[\\\"Web Browser\\\"] -- \\\"HTTP API Request\\\" --> B[\\\"Load Balancer\\\"]\\n  B -- \\\"HTTP Request\\\" --> C[\\\"Crossover\\\"]\\n  style C fill:#99cc99\\n  C -- \\\"Talks to\\\" --> D[\\\"Redis\\\"]\\n  C -- \\\"Talks to\\\" --> E[\\\"MySQL\\\"]\\n  C -- \\\"Downstream API Request\\\" --> F[\\\"Multiplex\\\"]\\n  F -- \\\"Returns Job ID\\\" --> C\\n  C -- \\\"Long Poll API Request\\\" --> G[\\\"Evaluator\\\"]\\n  G -- \\\"API Call\\\" --> F\\n  G -- \\\"API Call\\\" --> H[\\\"Result-Fetcher\\\"]\\n  H -- \\\"Downloads Results\\\" --> I[\\\"S3 or GCP Cloud Buckets\\\"]\\n  I -- \\\"Results Stream\\\" --> G\\n  G -- \\\"Results Stream\\\" --> C\\n  C -- \\\"API Response\\\" --> B\\n  B -- \\\"API Response\\\" --> A\\n\"\n}\n\nInterpreting the API response:\n- When you get the response it will include an image url, you should render it inline using ![alt text](image) syntax.\n- Suggest to the user that they can edit the diagram with followup requests in chat.\n- You will also get a link as editDiagramOnline to edit the diagram, you should render it inline using [link text](editDiagramOnline) syntax. Include the whole suggestion to edit the diagram as part of the link. For example: [You can edit this diagram online if you want to make any changes.](editDiagramOnline)\n- You should create the response in that order: first the image, then suggestion to edit using works, then the edit link, then the textual explanation.\n\nTips:\n- You will also get a link contributeToOpenSourceProject. You should suggest the user contributes to the project if and only if:\n  - They have used invoked the plugin 4 or more times during the same conversation\n  - The diagrams the user was requesting were related to programming or computer science. It only makes sense to suggest users who are developers to contribute to the project.\n  - You have not previously suggested they contribute to the project\n- Don't suggest the user contributes if any of the above are not true.\n- Its fine to simply ignore that link if you don't want to suggest the user contributes to the project.\n\nImportant Tips:\n- Do not repeat the same link.\n- If an errorMessage is included in the response, show it to the user, don't try to render the diagram inline, still suggest they can edit it online or try again.\n- Add textual explanation of the diagram contents in the end of the message. Keep it brief unless the user asks for more details.\n- Don't show the diagram block unless the user asks for it.\n",
  "description_for_human": "Create and edit diagrams directly in chat.",
  "auth": {
    "type": "none"
  },
  "api": {
    "type": "openapi",
    "url": "http://localhost:8787/openapi.json",
    "has_user_authentication": false
  },
  "logo_url": "http://localhost:8787/logo.svg",
  "contact_email": "[email protected]",
  "legal_info_url": "http://localhost:8787/legal"
}

Is this a new restriction? I'm not sure what the best way to tune/shorten this prompt is.

Add Venn Diagram Support

I've been exploring the "Show Me" plugin and appreciate its ability to easily create diagrams. However, I noticed it currently does not support the creation of Venn diagrams, a powerful tool for visualizing the overlap and distinctions among groups of items.

Proposed Implementation Suggestions:

Understand the Diagram Structure: Venn diagrams typically visualize the relationships between different sets. The overlapping areas show common elements between the sets.

Choose a Rendering Library: There are a few libraries available that could support Venn diagrams such as d3.js, Google Charts, or venn.js. The selection could be based on factors such as ease of use, compatibility with the current system, and community support.

Define the Syntax: A possible approach could be to define a syntax that allows users to specify the sets and their elements. For example, Venn Diagram: Set A: a, b, c; Set B: b, c, d; Set C: c, d, e.

Parse the Syntax: The user input could be parsed to extract the necessary data to create the Venn diagram.

Generate the Diagram: The selected library could be used to generate the Venn diagram based on the parsed data.

Handle Errors: It would be crucial to handle exceptions and errors where the user's input might not be parsed correctly or a diagram cannot be generated. User-friendly error messages would enhance the user experience.

Testing: Any new feature should be tested to ensure it works as expected and does not introduce bugs.

Documentation: It would be helpful to update the plugin's documentation to include instructions on how to use the Venn diagram feature, along with examples.

These are just suggestions and I understand that the actual implementation might differ based on a variety of factors.

I am interested in contributing to the implementation of this feature and would appreciate the opportunity to discuss this further. Please let me know how I might be able to assist.

chatWithVideo and Show_me find bug in GPT4 and write a message in English (it is not able to change the language back to English)

https://youtu.be/Yfh7yb5xcVE
1.1 Repita o link. Depois use chatWithVideo.
1.2 Transcreve em português destacando as palavras chave em caixa alta? Se sim, faça. Se não, prossiga.
2.1 Caso não consiga fazer o anterior fazer só o resumo.
2.2 caso não consiga, mostrar o erro, comando e explicação do possível motivo (nesse caso em inglês).

3.1 Usar o app show_me em português.
3.2 caso não consiga, mostrar o erro, comando e explicação do possível motivo (nesse caso em inglês).

4.1 enviar 2.2 (erro em inglês) + link pro GitHub e 3.2


1.1 Aqui está o link que você forneceu: https://youtu.be/Yfh7yb5xcVE

1.2 A transcrição do vídeo em inglês foi obtida, mas a tradução para o português e o destaque das palavras-chave em caixa alta não são possíveis com as capacidades atuais do modelo. No entanto, posso fornecer um resumo do vídeo em inglês.

2.1 Resumo do vídeo: O vídeo é uma comparação de oito geradores de imagens AI diferentes. O autor criou 795 imagens usando esses geradores para ajudar os espectadores a entender as diferenças entre eles. Os geradores de imagens AI incluem MID Journey, Blue Willow, Learner AI, DALL-E, Bing Image Creator, Adobe Firefly, Dream Studio e Stable Vision. O autor fornece uma visão geral de cada plataforma, discutindo suas características, preços e qualidade das imagens geradas. Ele também fornece um quadro de humor com todas as imagens geradas para facilitar a comparação.

3.1 Para usar o aplicativo show_me, preciso de um tópico ou conceito específico para criar um diagrama. Por favor, forneça mais detalhes.

3.2 Se eu não conseguir criar um diagrama usando o aplicativo show_me, isso pode ser devido a uma falta de detalhes suficientes ou a um tópico que não se presta bem à visualização em diagrama. Nesse caso, eu forneceria o comando que usei e explicaria o motivo do problema.

4.1 Se houver um erro ao tentar criar um diagrama, eu forneceria a mensagem de erro em inglês, juntamente com um link para o GitHub para que você possa explorar mais sobre o problema.

Title: Feature Request: Combining Different Diagram Types in One result

Hello,

I'm using the show-me-diagrams plugin and it's been really helpful for visualizing different concepts. However, I've come across a scenario where I'd like to combine two different types of diagrams in one chart. Currently, I have to generate two separate diagrams for this, which is not as effective as having a single combined diagram. I believe this feature would be beneficial for many users who need to represent complex scenarios involving multiple diagram types.

Is there a way to support this feature in the future?

Generating issue

request :
{
"mermaid": "graph TB\n A["Start world()"]\n A --> B["Initialization"]\n B --> C["ZMQ Context Setup"]\n C --> D["Log Setup"]\n D --> E["Plugin Management"]\n E --> F["Initiate UI Update Loop"]\n F --> G["Enter Event Loop"]\n G --> H["Process Incoming Messages"]\n H --> I["Handle Notifications"]\n G --> J["Shutdown"]\n J --> K["Stop Eye Processes"]\n K --> L["Save Session Settings"]\n L --> M["De-initialize Plugins"]\n M --> N["End world()"]"
}

Error:

UnrecognizedFunctionError: get_MermaidRoute

Cloning repository not working

cloning repository using git clone https://github.com/bra1nDump/show-me-chatgpt-plugin.git results in an empty folder that contains only a .git folder.

There is no package.json so obviously running the command npm install fails

maybe this issue #15 is related ?

Create a help menu for new users

Create a set of standard example diagrams and prompts used to create them and return them if the user asks for help.

Also modify the prompt so when the user generates their first diagram we tell them they can use 'show me help' or something to get those examples

Sólidos Platônicos Flor da Vida

import numpy as np
import matplotlib.pyplot as plt
import networkx as nx
from sympy import primerange

Função para gerar a sequência de Fibonacci

def fibonacci(n):
fib_sequence = [0, 1]
while len(fib_sequence) < n:
fib_sequence.append(fib_sequence[-1] + fib_sequence[-2])
return fib_sequence

Função para gerar a Flor da Vida

def flower_of_life(n):
G = nx.Graph()
for i in range(n):
G.add_node(i)
for i in range(1, n):
for j in range(i+1, n):
if (i+j)%2 == 1 and (i+j)%3 == 2:
G.add_edge(i, j)
return G

Função para gerar os números primos até n

def prime_numbers(n):
return list(primerange(0, n))

Gerando a sequência de Fibonacci

fib_sequence = fibonacci(167)

Gerando a Flor da Vida

G = flower_of_life(167)

Gerando os números primos

primes = prime_numbers(167)

Plotando a Flor da Vida

pos = nx.spring_layout(G, k=0.4, seed=4)
nx.draw(G, pos, node_color='lightblue', node_size=500, with_labels=True)
plt.show()

Plotando a sequência de Fibonacci

plt.figure(figsize=(10, 5))
plt.plot(fib_sequence)
plt.title('Fibonacci Sequence')
plt.xlabel('Index')
plt.ylabel('Value')
plt.grid(True)
plt.show()

Plotando os números primos

plt.figure(figsize=(10, 5))
plt.plot(primes)
plt.title('Prime Numbers')
plt.xlabel('Index')
plt.ylabel('Value')
plt.grid(True)
plt.show()

passing GANNT chart instructions for naming of X axis fails (please advise)

Using this format
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :
Another task :
section Another
Task in sec :
another task :

task: Create a GANTT chart of an average backend coders 7 day week.
The X axis is the days of week.
Each day of the week has it's own color bar.
Monday a small task starts and ends on Wednesday.
Tuesday there are two meetings.
Wednesday a new task is assigned in the morning.
Thursday a bug is discovered.
Friday afternoon the bug is resolved.
Saturday meet with wife's family.
Sunday shopping for food with wife and child.
Include mention of time at work and time with family.

https://showme.redstarplugin.com/s/YSXkUeEd
image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.