diff --git a/content/blog/11-introducing-delineate/animations.gif b/content/blog/11-introducing-delineate/animations.gif new file mode 100644 index 0000000..0d007b4 Binary files /dev/null and b/content/blog/11-introducing-delineate/animations.gif differ diff --git a/content/blog/11-introducing-delineate/card.png b/content/blog/11-introducing-delineate/card.png index ade4bff..6eb2281 100644 Binary files a/content/blog/11-introducing-delineate/card.png and b/content/blog/11-introducing-delineate/card.png differ diff --git a/content/blog/11-introducing-delineate/exporting.png b/content/blog/11-introducing-delineate/exporting.png new file mode 100644 index 0000000..0c0f99e Binary files /dev/null and b/content/blog/11-introducing-delineate/exporting.png differ diff --git a/content/blog/11-introducing-delineate/gstreamer-pipeline.png b/content/blog/11-introducing-delineate/gstreamer-pipeline.png new file mode 100644 index 0000000..9909973 Binary files /dev/null and b/content/blog/11-introducing-delineate/gstreamer-pipeline.png differ diff --git a/content/blog/11-introducing-delineate/index.md b/content/blog/11-introducing-delineate/index.md index bc04e08..1bb0378 100644 --- a/content/blog/11-introducing-delineate/index.md +++ b/content/blog/11-introducing-delineate/index.md @@ -1,7 +1,7 @@ +++ title = "Introducing Delineate!" -date = 2024-07-26T12:29:00.001+08:00 -updated = 2024-07-26T12:29:00.001+08:00 +date = 2024-09-23T12:29:00.001+08:00 +updated = 2024-09-23T12:29:00.001+08:00 draft = true [taxonomies] @@ -14,17 +14,33 @@ social_media_card = "card.png" > Delineate provides facilities to edit and draw graphs specified in the [DOT language](https://graphviz.org/doc/info/lang.html). It is designed to be a simple and intuitive tool for creating and editing graphs, with a focus on the user experience. -## Introduction - -* What is Delineate (brief description of what it does) -* What it solves (why was it created) +As mentioned above, Delineate, previously named Dagger, is a new app to view and edit DOT graphs. It is like [KGraphViewer](https://apps.kde.org/kgraphviewer/), but with the ability to edit the graph and is built with LibAdwaita, which makes it more at home on GNOME. There is also another app called [GraphUI](https://github.com/artemanufrij/graphui), but it is currently unmaintained and designed for Elementary OS. ## Features -Show demonstration on: -* GST Pipeline dumps -* Bustle DOT Graphs -* Pipewire dumps +One of the main reasons I developed Delineate is for debugging GStreamer pipeline dumps. I use it extensively to visualize the pipeline, inspect the elements, and analyze the negotiations between them. + +![GStreamer Pipeline](gstreamer-pipeline.png) + +It is also useful for visualizing connections on the message bus, offering an alternative perspective to tools like Bustle. + +![Message Bus](message-bus.png) + +Another use case I discovered from Bilal is visualizing the Pipewire graph from the `pw-dot` command. + +![Pipewire DOT](pipewire-dot.png) + +The app also supports changing the layout engine on the fly, which is useful for tweaking the graph to make it more readable depending on the use case. + +![Layout Engines](layout-engines.gif) + +Also, thanks to the library behind the app, `d3-graphviz`, it supports animations, which can be less jarring when modifying the graph. + +![Animations](animations.gif) + +Finally, you can export the graph to a PNG, SVG, or JPG image. + +![Exporting](exporting.png) ## Getting Delineate @@ -32,9 +48,17 @@ Delineate is available on [Flathub](https://flathub.org/apps/io.github.seadve.De ## Future Plans -## Acknowledgment +Since this is the first release, there are many features I would like to add in the future. Some of the features I am considering are: -I would also like to thank Brage Fuglseth for the name and icon design. +- More interactive editing and viewing features, such as selective highlighting of elements when searching. +- Support for other graph formats, such as [Mermaid](https://mermaid.js.org/). +- Bird's eye view for large graphs. +- More useful text editing features, such as auto-completion, color picker, and more. ## Closing Words +Before I end this post, I would like to thank Brage Fuglseth for the new name, Delineate, and the beautiful icon design. + +![Logo](logo.png) + +I hope you find Delineate as useful as I do. If you have any feedback or suggestions, feel free to open a discussion or issue on the [GitHub repository](https://github.com/SeaDve/Delineate). Enjoy the release! diff --git a/content/blog/11-introducing-delineate/layout-engines.gif b/content/blog/11-introducing-delineate/layout-engines.gif new file mode 100644 index 0000000..dece942 Binary files /dev/null and b/content/blog/11-introducing-delineate/layout-engines.gif differ diff --git a/content/blog/11-introducing-delineate/logo.png b/content/blog/11-introducing-delineate/logo.png new file mode 100644 index 0000000..a635e78 Binary files /dev/null and b/content/blog/11-introducing-delineate/logo.png differ diff --git a/content/blog/11-introducing-delineate/message-bus.png b/content/blog/11-introducing-delineate/message-bus.png new file mode 100644 index 0000000..2b2583c Binary files /dev/null and b/content/blog/11-introducing-delineate/message-bus.png differ diff --git a/content/blog/11-introducing-delineate/pipewire-dot.png b/content/blog/11-introducing-delineate/pipewire-dot.png new file mode 100644 index 0000000..ead25b3 Binary files /dev/null and b/content/blog/11-introducing-delineate/pipewire-dot.png differ