renanlecaro / mermaid-gdocs Goto Github PK
View Code? Open in Web Editor NEWMermaidsjs wrapper for gdocs.
Home Page: https://mermaid-gdocs.lecaro.me/
Mermaidsjs wrapper for gdocs.
Home Page: https://mermaid-gdocs.lecaro.me/
First, thank you so much for writing this. I love mermaid and am beyond excited to see your add-on support these right inside google docs.
In any case, on my initial testing, I noticed the following diagram throws an error in the editor:
sequenceDiagram
Alice->>Bob: Hello Bob, how are you?
alt is sick
Bob->>Alice: Not so good :(
else is well
Bob->>Alice: Feeling fresh like a daisy
end
rect rgb(216, 241, 251)
opt Extra response
Bob->>Alice: Thanks for asking
end
end
Whereas, if you remove the rect block, it works fine:
sequenceDiagram
Alice->>Bob: Hello Bob, how are you?
alt is sick
Bob->>Alice: Not so good :(
else is well
Bob->>Alice: Feeling fresh like a daisy
end
opt Extra response
Bob->>Alice: Thanks for asking
end
Background Highlighting (rect) I believe is a recent addition to the Mermaid sequence diagram specification.
See https://mermaidjs.github.io/#/sequenceDiagram?id=background-highlighting
PR #3 addresses the issue here as well as a few other minor changes.
I installed from Google Marketplace. Mermaid appears under the Add-ons, and I am able to choose chart types to insert. When I fill anything in to make a chart, I get nothing on the right side of the dialog, even when I'm sure it's good mermaid code.
I also checked in Incognito, in case another extension was interfering, but it acts the same there. Also tried in a brand new document.
Chrome is 95.0.4638.69
I have an existing document with some diagrams (all sequence diagrams). They render fine.
However, when I try to create a new diagram or update an existing one, there's an issue. When updating, I'm able to make a change to the diagram via Edit selected chart
and have it reflected, but when I click Update
, I see this error message:
ScriptError: We're sorry, a server error occurred. Please wait a bit and try again.
I see a similar error message when creating a new diagram and clicking Insert
with the default graph diagram code. I saw this error message yesterday and this morning.
I've tried:
When looking at the error console, I don't see anything obvious, but there is a warning message when I first start up the extension: There was an error during the transport or processing of this request. Error code = 404, Path = /wardeninit
When clicking save, I see:
graph LR
A -->B data:image/png;base64,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
2382548268-warden_bin_i18n_warden.js:107 Net state changed from IDLE to BUSY
2382548268-warden_bin_i18n_warden.js:107 Net state changed from BUSY to IDLE
but no other errors.
I'm using Version 112.0.5615.138 (Official Build) (64-bit)
on Windows 10. I tested on Version 112.0.5615.137 (Official Build) (x86_64)
on macos (intel) and it works, weirdly enough.
Hello,
Mermaid on GDocs works perfectly, except for the Gantt Diagram.
When you insert it the first time, it works fine, but when you try to edit the Gantt Diagram, it says Please selecte an existing chart created with this app first.
whereas for others, it can be edited.
Have you had that issue ?
Thank you
Can we have a reduced scope of permissions?
Currently, this is what's requested:
I also have the PlantUML Gizmo add-on, and it requests for a smaller scope:
I think that's a better scope to request for, and it gives us better peace of mind. The current permission is preventing me from using the add-on for work.
The plantuml gizmo addon offers editing via a sidebar and it's awesome. But having a larger window for bigger graphs is also quite useful.
Hi,
i like your plugin very much, as it helps collaboration on a chart.
Unfortunately it does not work in in my Chrome Browser (Version 119.0.6045.199 on OSX)
Works fine in Safari.
On Chrome it does not render the graph. In the graph area the source code is shown.
Let me know whether and what further information you need to track this down.
TIA tom
Hi,
the chars < and > are somehow special within the google docs environment. The example diagram below will wok fine in the live editor at https://mermaid-js.github.io/mermaid-live-editor/edit , but will add another </john>
at the end in google docs.
Depending on the content of the < ... > sequence, the diagram fails to render at all.
sequenceDiagram
Alice->>+John: Hello <John>, how are you?
Thanks,
Laurent
First thanks for your work @renanlecaro 👏 This extension is really helpful.
It could be a cool idea to add autocompletion on top of the cursor for the mermaid nodes:
%% Here the nodes are Page and Section
graph TB
Page["⚛️Page"]
Section["⚛️Section"]
So when you start writing Sec...
it will propose you Section
. Then as a user I don't need to rewrite it or copy-paste it 👍
The plugin was working well but now has stopped functioning. The only thing I know of that changed was upgrading to the latest version of Chrome.
The symptom is that the extension UI loads but is non-functional. A series of error messages are logged to the browser console each time the extension UI is launched. (See attached)
Chrome version: Version 111.0.5563.146 (Official Build) (arm64)
OS: macOS Ventura 13.3
Here's a diagram that I was trying to render in the docs:
sequenceDiagram
participant a as Phone
box Public-Facing API
participant proxy as Cloud Run
participant fcm as FCM
participant fs as Firestore
end
box Cloud Node internal services
participant pubsub as Pub/Sub
participant b as HTSS
participant sql as Cloud SQL
participant redis as Memory Store
participant kms as Cloud KMS
participant iam as Cloud IAM
participant audit as Cloud Audit Log
end
a->>a: Start Workload
a->>proxy: Send Public Key and Device ID
proxy->>pubsub: Forward Public Key and Device ID
b->>pubsub: Receive Public Key and Device ID
b->>fs: Store Node Public Key under Device ID key
b->>fcm: Send Public Key notification
fcm->>a: Notify about Node Public Key
a->>proxy: Init keygen
proxy->>pubsub: Forward Keygen init
b->>pubsub: Receive Keygen init
b->>b: Create KeyGen
b->>redis: Cache KeyGen
b->>sql: Authenticate
sql->>iam: Verify token
alt token OK:
iam->>sql: OK
else wrong token:
break when wrong token:
iam->>audit: Attestation failed: Wrong Token
end
end
b->>sql: Store KeyGen
par Between Nodes:
loop Each node to each other:
b->>fcm: Ask for a KeyGen
a->>a: Encrypts a KeyGen using Node Public Key
a->>proxy: Send encrypted KeyGen
proxy->>pubsub: Forward encrypted KeyGen
b->>pubsub: Receive encrypted KeyGen
b->>b: Decrypt KeyGen
b->>b: Generate key share
b->>kms: Encrypt key share
kms->> iam: Verify token
alt token OK:
iam->>kms: OK
else wrong token:
break when wrong token:
iam->>audit: Attestation failed: Wrong Token
end
end
b->>fs: Store encrypted key share for Phone
b->>fcm: Send notification about encrypted key share
fcm->>a: Notify about key share
b->>sql: Authenticate
sql->>iam: Verify token
alt token OK:
iam->>sql: OK
else wrong token:
break when wrong token:
iam->>audit: Attestation failed: Wrong Token
end
end
b->>sql: Store Encrypted Key Share
b->>redis: Clear KeyGen
end
end
sequenceDiagram
participant a as Phone
box Public-Facing API
participant proxy as Cloud Run
participant fcm as FCM
participant fs as Firestore
end
box Cloud Node internal services
participant pubsub as Pub/Sub
participant b as HTSS
participant sql as Cloud SQL
participant redis as Memory Store
participant kms as Cloud KMS
participant iam as Cloud IAM
participant audit as Cloud Audit Log
end
a->>a: Start Workload
a->>proxy: Send Public Key and Device ID
proxy->>pubsub: Forward Public Key and Device ID
b->>pubsub: Receive Public Key and Device ID
b->>fs: Store Node Public Key under Device ID key
b->>fcm: Send Public Key notification
fcm->>a: Notify about Node Public Key
a->>proxy: Init keygen
proxy->>pubsub: Forward Keygen init
b->>pubsub: Receive Keygen init
b->>b: Create KeyGen
b->>redis: Cache KeyGen
b->>sql: Authenticate
sql->>iam: Verify token
alt token OK:
iam->>sql: OK
else wrong token:
break when wrong token:
iam->>audit: Attestation failed: Wrong Token
end
end
b->>sql: Store KeyGen
par Between Nodes:
loop Each node to each other:
b->>fcm: Ask for a KeyGen
a->>a: Encrypts a KeyGen using Node Public Key
a->>proxy: Send encrypted KeyGen
proxy->>pubsub: Forward encrypted KeyGen
b->>pubsub: Receive encrypted KeyGen
b->>b: Decrypt KeyGen
b->>b: Generate key share
b->>kms: Encrypt key share
kms->> iam: Verify token
alt token OK:
iam->>kms: OK
else wrong token:
break when wrong token:
iam->>audit: Attestation failed: Wrong Token
end
end
b->>fs: Store encrypted key share for Phone
b->>fcm: Send notification about encrypted key share
fcm->>a: Notify about key share
b->>sql: Authenticate
sql->>iam: Verify token
alt token OK:
iam->>sql: OK
else wrong token:
break when wrong token:
iam->>audit: Attestation failed: Wrong Token
end
end
b->>sql: Store Encrypted Key Share
b->>redis: Clear KeyGen
end
end
As you can see, GH as well as mermaid.js live editor are able to render it without a glitch. Any help is appreciated.
I assume this may be smth just related to the size of the diagram.
Currently, only working in Docs.
Would it be possible to add support so the Add-On works in Slides as well?
Great add-on BTW.
No reason not to have it
Thanks for this great tool!
Would be great to add support for customising the configuration object
When mermaid fails to understand the text input from the user, we just add a red border for now. It would be nice to give more details
Gantt chart is showing only in too small width.
Trying to edit a flowchart that I created in Google Docs using the Mermaid Add On.
After several rounds of edits, it no longer recognized the chart as one created in mermaid, and I get the following pop-up error:
"Please select an existing chart created with this app first."
Seems to have happened afer I resized and poisitioned it within the document.
Any suggestions? I exited out, and relaunched the google doc, but still happening.
TIA.
Thanks for the great add-in. Would it be possible to add support for state diagrams?
great add-on!
could you update to latest mermaid version?
thanks
The all sequence diagram is duplicated no matter what I use.
For example:
A->>B
Will show it twice
If the diagram is fairly not that small, the insert button is hidden below the SVG. Probably some z-index
and overflow: scroll
styling would fix the issue. Let me know if you need any help!
Update: Expanding the textarea
helps in showing the button.
Thank you so much for a super awesome plugin. I use it almost every day!
I'm so sad that it has stopped working. I get the following error:
This document requires 'TrustedHTML' assignment.
I0 @ mermaid-d06ecb0d.js:5603
I hope you can fix it. Thanks again!
In our organization we standardized on writing C4 diagrams for context.
We were searching a way to add diagrams to gdocs and found this application that seem very promising since mermaid can handle C4 diagrams (beta feature, but still better than nothing) see: https://mermaid.js.org/syntax/c4c.html
It would be great to add support for C4 diagrams, from what I understand it should be a tiny modification to this test https://github.com/renanlecaro/mermaid-gdocs/blob/master/src/index.js#L119
I've found myself occasionally editing small things in the text area.
With the importance of indentation for mermaid js, the tab key usage would be nice, but since it's a form it just navigates to the next element.
This will break the form navigation though, so maybe an alternative keybinding?
That's because the picture becomes a different class of document element.
Hello,
Great plugin!
When I update a diagram, the diagram 'forgets' its size (of the inserted image). Is it possible to edit a diagram while maintaining the size. I.e.,
Can that be changed?
The font awesome mermaid feature doesn't seem to work.
Maybe this is just due to the version of mermaid used?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.