Plugin that lets you create diagrams from textual representation (aka 'Diagrams as Code') within Logseq

Overview

Logseq - Diagrams as Code

Plugin that lets you create diagrams (and other visualizations) from textual representation (aka 'Diagrams as Code') within Logseq.

Demo

Features

Diagrams

Math

Additionally, the plugin supports AsciiMath and TeX to display mathematical formulas.

Note that Logseq already supports TeX-style inline math (type $$ to try it out).
Another great option for writing math is darwis-mathlive-plugin.

Rendering

For diagram types that can not be rendered locally, the plugin uses the awesome kroki.io service.

If you don't want to send your diagrams to a third party, there is the possibility to host it in your own infrastructure.

You can change the kroki URL in your plugin config accordingly:

{
    "kroki": {
        "baseUrl": "https://my-own-kroki-serice/"
    }
}

Decorating Diagrams

There are some options to decorate your diagrams.

Adding title and caption

You can add a title and a caption to each diagram.
To do that, you have to specify diagram options.

Diagram options are provided as a renderer argument, where each option is a key-value pair with key and value separated by '='.
Multiple options are separated by '&' (e.g. title=My Title&caption=My Caption).

Example

Without diagram options:

{{renderer code_diagram,plantuml}}

With diagram options:

{{renderer code_diagram,plantuml,title=My Title&caption=My Caption}}

The result would look something like this:

example1

All Diagram Options

First, to better understand how the diagram options are used, let's have a look at the basic structure of the renderer component (in 'pseudo html'):

<Renderer>
    <Container style="${options.containerStyle}">
        <Title style="${options.titleStyle}">${options.title}</Title>
        <Content style="${options.contentStyle}">
            <MyDiagram/>
        </Content>
        <Caption style="${options.captionStyle}">${options.caption}</Caption>
    </Container>
</renderer>

List of all options:

Key Default Example Value Description
title My Title title text
titleStyle margin: 5px title css style
titleTag h4 h3 title html tag
caption My Caption caption text
captionStyle font-style: italic; margin: 5px caption css style
captionTag h6 h5 caption html tag
containerStyle background: lightgray; padding:5px container css style
contentStyle background: #eeeeee content css style

And this is how it would look if we used all example values:

example2

Global Styling

If you have a preferred 'default look' for diagrams, it would be cumbersome to add the corresponding styles to each diagram by hand.
Luckily, for styling that applies to all your diagrams there are some CSS classes that you can use in your custom.css file ( Settings / General / Custom theme ).

  • dac-container
  • dac-title
  • dac-caption
  • dac-content

See pseudo html structure above

Diagram-type specific styling

For global but diagram-type specific styling, just append -$diagramType to the CSS class name.
E.g. dac-container-plantuml for PlantUML diagrams.

Comments
  • Can't change the style

    Can't change the style

    Hi buddy, Thanks for your amazing plugin, I like it very much, but only have a little problem. I followed the instruction and added the following code into file custom.css , but nothing happened.

    .dac-container {
      background-color: #eeeeee;
    }
    

    Thanks.

    opened by 8088boy 4
  • How to edit code inside {{}} ?

    How to edit code inside {{}} ?

    After I've created a diagram, how do I edit the diagram metacode inside of the {{}}, for example, to add a title? Once I see a rendered image of the diagram, nothing happens when I click on the block text. I don't know what I should see, but I was expecting the raw markup, like I see in other blocks. Then, in the markup, I thought I'd see the {{}} stuff shown in the README.

    If I expand the block, so I see the diagram code -- in my case, the mermaid code -- I still don't see any place to edit {{}}

    question 
    opened by notuntoward 3
  • add plantuml activity diagram (new syntax) to templates

    add plantuml activity diagram (new syntax) to templates

    Hi @npgrosser, thanks for the great plugin. I was missing a template for the plantuml activity diagram, thus thinking it was not supported. It actually is supported by kroki :-) Would be nice to have it in the official plugin.

    opened by mlthlschr 1
  • D2 lang support

    D2 lang support

    Ex: https://play.d2lang.com/?script=pJFRyoNADITfc4q5wO8B9uG_ikR3KaGu2k1sEfHuJerS10IfEybMl5l-Ulty0oCNgAM6QB9Da9wNiQCJATIatk_sAXORzGVt72nd_Uw8oKR6SAnIrk2ljgOrtcscvd8Ak5zUOM-0E13K3_zz9BQ_syLjjYDXUeQX7vX75sLA339l10YiEfumo3ji9T4x7ec6NkzvAAAA__8%3D&sketch=1&theme=5&layout=dagre

    opened by avelino 1
  • Mermaid Gantt doesnt scale with page width

    Mermaid Gantt doesnt scale with page width

    Hi,

    When using logseq 0.7.5 and Diagrams as Code 0.0.13 and using standard mermaid syntax like gantt title A Gantt Diagram dateFormat YYYY-MM-DD section Section A task :a1, 2014-01-01, 30d Another task :after a1 , 200d section Another Task in sec :2014-01-12 , 12d another task : 24d

    It doesnt scale with the page width, its always to narrow for anything meaningful to be used in a timeline. Screenshot 2022-07-09 at 16 32 03

    enhancement 
    opened by statixVFX 0
Releases(0.0.17)
Owner
Nicolai P. Großer
Nicolai P. Großer
An Obsidian plugin that lets you browse the web within Obsidian.

Obsidian Web Browser An Obsidian plugin that allows you to browse the web within Obsidian using v1.0 tabs. The core functionality of the plugin, rende

Dion Tryban 102 Dec 28, 2022
Logseq-craft-theme - Craft Theme for Logseq

Craft for Logseq Almost all creativity requires purposeful play. A Craft insprir

Alexander Rink 33 Oct 26, 2022
MidJourney is an AI text-to-image service that generates images based on textual prompts. It is often used to create artistic or imaginative images, and is available on Discord and through a web interface here.

Midjourney MidJourney is an AI text-to-image service that generates images based on textual prompts. It is often used to create artistic or imaginativ

Andrew Tsegaye 8 May 1, 2023
Full dynamic tool kit that is capable of deobfuscating and producing a javascript representation of Shape's Virtual Machine obfuscation

Shape Security Decompiler Tool-Kit This tool kit is capable of dynamically deobfuscating all versions of shape security's virtual machine interpreter

null 25 Dec 15, 2022
Format an array of data objects as a textual table.

st2 st2 is string-table refactored in TypeScirpt with more enhancements: add type information, then it can be used in modern IDE like vscode to work w

null 6 Sep 10, 2022
This Plugin is For Logseq. If you're using wide monitors, you can place journals, linked references, and journal queries side by side.

Logseq Column-Layout Plugin Journals, linked references, and journal queries can be placed side by side if the minimum screen width is "1850px" or mor

YU 14 Dec 14, 2022
TypeScript plugin for service-to-service (aka. "functionless") cloud integrations.

Functionless λ< Functionless is a TypeScript plugin that transforms TypeScript code into Service-to-Service (aka. "functionless") integrations, such a

sam 303 Jan 2, 2023
An extension to download all you need in the LGU (aka CUHKSZ) Blackboard

LGU Blackboard Downloader A Chromium (Chrome/Edge compatible) browser extension to download all you need in the LGU (aka CUHKSZ) Blackboard 一个Chrome/E

Zcorn 4 Mar 4, 2023
A website that lets you create legit-looking GitHub links that rickroll the visitor.

microsoftgithub.com, a.k.a. NotHub A website that lets you create legit-looking GitHub links that rickroll the visitor. Usage Just replace github.com

Ash 12 Dec 23, 2022
CandyPay SDK lets you effortlessly create NFT minting functions for Candy Machine v2 collections.

@candypay/sdk CandyPay SDK lets you effortlessly create NFT minting functions for Candy Machine v2 collections. Simulate minting transactions for mult

Candy Pay 33 Nov 16, 2022
aka Scaletor, take screenshots of a piece of a map and scale/compare with other parts of the map

scale-a-tron A quick-and-dirty map that lets you compare one area to another. Draw a shape around a region, zoom in to another place on the map, and c

Stamen Design 24 Nov 7, 2022
Hacking Instructions for the Nokia 800 Tough (aka Bananaphone with KaiOS)

Nokia 800 Tough Hacking Instructions for Arch Linux host system. I don't care about your messed up Windows, sorry. 1. Android Platform Tools Install t

Cookie Engineer 3 Jul 12, 2022
🎲 Extract one or more random elements from a weighted array (aka loot table or gacha)

wrand Extract one or more random elements from a weighted array. const items = [ { original: "Bronze", weight: 20 }, { original: "Silver", weight:

Leonardo Montini 14 Dec 2, 2022
a tweaked hackchat client. aka hackchat++.

hackchat-client-plus A tweaked hackchat client. aka hackchat++. Most code are from https://github.com/hack-chat/main. Hosted at https://hcer.netlify.a

null 7 Dec 24, 2022
A logseq plugin to extract tweets. Optionally tag the tweet's author as well.

Logseq Twitter Extractor Plugin If this plugin helps you, I'd really appreciate your support. You can buy me a coffee here. A quick utility to parse a

null 17 Nov 17, 2022
Migrate unfinished tasks to today, Logseq plugin

Unfinished-business Unfinished Business Because the day may be over, but your business isn't View Demo · Report Bug · Request Feature This plugin migr

Alex 23 Nov 16, 2022
A plugin to export pages in Logseq to Hugo.

logseq Schrödinger An awesome Logseq plugin to jumpstart your digital garden ?? ! Explore the docs » View Demo · Report Bug · Request Feature Table of

null 162 Jan 8, 2023
A simple to-do list plugin for logseq

Logseq Todo Plugin A simple to-do list plugin for logseq Feature quick add new to-do items to today's journal page show all today's to-do items (inclu

Yuexun Jiang 71 Jan 1, 2023
A file manager plugin for logseq(Search unused assets file)

logseq-plugin-file-manager Search files from assets and draws but not used in journals or pages. Please backup files before operation, and before dele

Hayden Chen 17 Dec 23, 2022