Product Launch
anonymous
138 points
30 comments
Posted30 days agoActive23 days ago
Fanfa
fanfa.devlaunchedweb_appdevelopers
Key Features
interactive diagramsanimated Mermaid diagramsMermaid syntax support
Tech Stack
Mermaid
Key Features
Tech Stack
For example, if you're visualizing a user flow, you might want rules about when new "objects" are sent down the pipe (example node rule: wait until received one item from each input), or how fast they travel, etc.
All the better if I can take an existing diagram and just spruce it up slightly for presentation.
As someone who started with demo scene and all I can understand the drive to have moving parts and all the gay stuff, but many people get easily confused by colours and animation.
Feedback:
1. I tried different mermaid diagrams from https://mermaid.live/, and your animation is only working with classes and flowcharts. It didn't work with the sequence diagram (which is the most interesting to me).
2. It would be great to control the animation to be a sequence instead of one animation for all arrows at once. What I would like to do is show fellow devs the workflow from start to finish, according to the spec.
I appreciate that this is just a start, but it looks promising and has great potential. Good luck!
This graph here has display issues. And the CPU is used waay too much on firefox
``` flowchart TD Step1["*Step 1: POC* (4 weeks)<br/>Vibe code for ONE tenant"]
Step1 --> Validate & Hire
Validate["Validation (4 weeks)"]
Hire["Hire developer (4 weeks)"]
Validate & Hire --> Spec
subgraph Spec["**Step 3: Specification** (with dev)"]
SpecStart["Parallel"] --> UI["UI prototype"]
SpecStart --> POC["POCs of all parts"]
SpecStart --> Arch["Architecture + stack"]
SpecStart --> Infra["Infrastructure"]
SpecStart --> FullSpec["Full MVP spec"]
UI & POC & Arch & Infra & FullSpec --> SpecEnd["Done"]
endHowever in some public speeches, I've always wanted to add some cool charts to attract attention. Especially at large events, a slightly different presentation can make my stuff stand out and gain more attention.
Your work has a nice launch here in HackerNews but no upvotes on ProductHunt, so I just voted there to support you
I love this idea. Problem is: it competes with "Hey Claude, take this diagram and animate it". The results are different (worse / better in different regards), but you can modify it more to your liking.
Maybe I'm not seeing the exact use case. I was very close to buying the plan (3 usd / m is a steal), but with Claude I can be more specific what I want.
Here's some feedback:
- the diagram is not centered and zoomed by default, this is easy to fix
- it would be great to have better animation controls, like progressbar, play half speed, etc.
- it would be great to be able to export animation to video, animgif, etc. e. g. with ffmpeg.js
https://developer.mozilla.org/en-US/docs/Web/API/VideoEncode...
It might be worth considering a feature to time/schedule each flow's animation, rather than having them run in an infinite loop, all at the same time.
UX feedback:
* The animation and the whole interface are sluggish on firefox/linux. There's about 1 sec delay after each action (like clicking on an option). * The site's CSS does not load on an old version of Chrome - v90 - (and the chart and animation don't either).
For example in this simplified chart:
``` flowchart LR subgraph Inputs A B end
subgraph Middleware
M
end
subgraph Outputs
X
Y
end
A --> M
B --> M
M --> X
M --> Y
G --> LThe input animation colors are pink and green, but the next step (M->output) is blue and orange.
I'd expect to see actual flow of usage/data (and if it included diagram syntax to specify message rates, etc that would be even better). So if there's a blue dot on the input side, I should be able to track that on the output side to its final destination.
For the demo on the screen, it would be great to reveal each subgraph as a step before it all flows together.
Is there any thought / plan / feasibility for adding a "reveal" type verb that could be placed between each subgraph to wait for a keypress to reveal the next subgraph? In the meantime, one could create 3 diagrams I guess of with one more subgraph added.
https://github.com/login/oauth/authorize?access_type=offline...
- can I download as animated gif or mpeg4 to embed into slides?
Wouldn't it be better if a Red square emits a Red ball that moves to some place? Or at least highlight 'paths' to show how stuff actually moves around?
1. Have you thought about creating some react components that would render these? You could then embed them in webpages and docs using something like https://fumadocs.dev/
2. For the animations themselves, you could have more customization options. For instance, adding the support for text cards or different shapes. I think having the option to add text in the moving parts would be really helpful for this kind of use case.
Not affiliated with Hacker News or Y Combinator. We simply enrich the public API with analytics.