LINUX.ORG.RU
Форум — General  

Чем нарисовать диаграмму в ASCII?

 ,


0

1

Привет

Есть простая задача: в терминале рисовать квадратики и соединять их стрелочками. Архитектурные диаграммы, если кому интересно. Нужно для технической документации в Markdown, и для работы с LLM в консоли.

Оказалось задача со звёздочкой.

  • plantuml не умеет в псевдографику (почему-то у меня), рисует тире и запятые
  • graphviz не умеет вообще в ASCIIart
  • graph-easy умеет в ASCIIart, но разбрасывает квадратики как ему хочется (а на таких диаграммах важно гже верх где низ), но, что хуже, - не умеет регулировать размеры квадратиков.

Какие есть варианты?

Стандарты вида UML и Mermaid приветсвуются, но не обязательны.

★★★★★
← Графические артефакты в браузере Chrome/Firefox
В продолжение предыдущей темы про Manjaro живых →

Не очень понятен смысл вопроса. Маркдаун как бы и есть синтаксис описания разметки с возможностью отображения таблиц.

Описания синтаксиса разметки для таблиц есть под формой помещения комментария.

kostik87 ★★★★★
()

plantuml не умеет в псевдографику (почему-то у меня), рисует тире и запятые

Звучит как то, что должно быть совсем не сложно исправить (наверное можно даже пулл-реквест потом оформить), если готового подходящего варианта не найдётся.

CrX ★★★★★
()
Ответ на: комментарий от kostik87

Ему не таблицы нужны, а диаграммы. Ну типа как блок-схемы. Прямоугольники с надписями внутри, рассыпанные по плоскости и осмысленно соединённые стрелочками.

CrX ★★★★★
()
Ответ на: комментарий от CrX

Звучит как то, что должно быть совсем не сложно исправить (наверное можно даже пулл-реквест потом оформить), если готового подходящего варианта не найдётся.

Проще свою тулу написать. Я вот уже думаю…

Но это ж не настолько редакая задача. Наверняка есть готовое решение.

Kroz ★★★★★
() автор топика
Последнее исправление: Kroz (всего исправлений: 1)
Ответ на: комментарий от dataman

leaf 1.21.0.

Вот я сегодня прочитал про него. Минус - нет пакета в Убунте. Но если эта штука работает, то затяну и без пакета.

Kroz ★★★★★
() автор топика
Ответ на: комментарий от Kroz 
$ graph-easy --as=boxart dia.txt
┌────────┐     ┌─────┐  WG / GRE / IPSEC / OVPN   ┌────────┐      ┌────────────┐
│ Client │ ──> │ NAT │ <────────────────────────> │ tunnel │ <──> │ PostgreSQL │
└────────┘     └─────┘                            └────────┘      └────────────┘

$ graph-easy dia.txt
+--------+     +-----+  WG / GRE / IPSEC / OVPN   +--------+      +------------+
| Client | --> | NAT | <------------------------> | tunnel | <--> | PostgreSQL |
+--------+     +-----+                            +--------+      +------------+

dia.txt

[ Client ] --> [ NAT ]
[ NAT ] <- WG / GRE / IPSEC / OVPN -> [ tunnel ]
[ tunnel ] <--> [ PostgreSQL ]

apt install libgraph-easy-perl

Вариант с «–as=boxart» в консоли нормально выглядит. Тут едет.

kostik87 ★★★★★
()
Последнее исправление: kostik87 (всего исправлений: 4)

не умеет в псевдографику

Может быть дело только в том, что нужно найти удобный способ ввода символов псевдографики?

unDEFER ★★★★★
()
Ответ на: комментарий от dataman

Так тоже не открывается. Но вообще странно.

Раз начинает скачивать styles.css - значит часть HTML основной страницы скачивается.

Видимо, ТСПУ дальше блокирует, сколько-то байт скачивается - а дальше блокируют.

kostik87 ★★★★★
()

Кастани пожалуйста, когда найдешь. Тоже есть потребность делать такое в org-mode

bryak ★★★★
()
Ответ на: комментарий от thesis

Гугло говорит про какой-то termaid.

Попробовал. Не умеет регулировать в ширину элементов и расположение по горизонтали. То есть если у тебя какой-то RabbitMQ или Kafka и в неё стримят 6 сервисов - не изобразить удобно.

Kroz ★★★★★
() автор топика
Ответ на: комментарий от thesis

https://d2lang.com/blog/ascii/

Вот это уже почти. Размеры регулирует, положение тоже. Не без багов (см. ниже), но наверное это лучшее что есть.

(Пробовал в консоли, но здесь тоже работает https://play.d2lang.com/).

Будем считать что оно. СС: @bryak

Спасибо!

Вот это норм:

direction: up

p: Pipe {
  width: 200
}

g1: Group 1 {
  s1: Service 1
  s2: Service 2
}

g2: Group 2 {
  s3: Service 3
  s4: Service 4
}

g1.s1 -> p
g1.s2 -> p
g2.s3 -> p
g2.s4 -> p

                           ┌───────────────────┐                          
                           │       Pipe        │                          
                           │                   │                          
                           └───────────────────┘                          
                               ▲   ▲   ▲   ▲                              
            ┌──────────────────┘   │   │   └──────────────────┐           
            │                      │   │                      │           
            │            ┌─────────┘   └─────────┐            │           
            │            │                       │            │           
 ┌──────────│────────────│──────────┐ ┌──────────│────────────│──────────┐
 │          │  Group 1   │          │ │          │  Group 2   │          │
 │          │            │          │ │          │            │          │
 │    ┌──────────┐  ┌──────────┐    │ │    ┌──────────┐ ┌──────────┐     │
 │    │Service 1 │  │Service 2 │    │ │    │Service 3 │ │Service 4 │     │
 │    │          │  │          │    │ │    │          │ │          │     │
 │    └──────────┘  └──────────┘    │ │    └──────────┘ └──────────┘     │
 │                                  │ │                                  │
 └──────────────────────────────────┘ └──────────────────────────────────┘

А вот это уже нет:

direction: up

p: Pipe {
  width: 200
}

g1: Group 1 {
  s1: Service 1
  s2: Service 2
}

g2: Group 2 {
  s3: Service 3
  s4: Service 4
}

s: Side {
  near: center-right
  height: 400
}

g1.s1 -> p
g1.s2 -> p
g2.s3 -> p
g2.s4 -> p

p -> s

                                                                           │      
                           ┌───────────────────┐                           │─────┐
                           │       Pipe        │                           │     │
                           │                   │                           │     │
                           └───────────────────┘                           │     │
                               ▲   ▲   ▲   ▲ ──────────────────────────────┘     │
                               │   │   │   │                               │     │
            ┌──────────────────┘   │   │   └──────────────────┐            │     │
            │                      │   │                      │            │     │
            │            ┌─────────┘   └─────────┐            │            │     │
            │            │                       │            │            │Side │
 ┌──────────│────────────│──────────┐ ┌──────────│────────────│──────────┐ │     │
 │          │  Group 1   │          │ │          │  Group 2   │          │ │     │
 │          │            │          │ │          │            │          │ │     │
 │                                  │ │                             ───────┐     │
 │    ┌──────────┐  ┌──────────┐    │ │    ┌──────────┐ ┌──────────┐     │ │     │
 │    │Service 1 │  │Service 2 │    │ │    │Service 3 │ │Service 4 │     │ │     │
 │    │          │  │          │    │ │    │          │ │          │     │ │     │
 │    └──────────┘  └──────────┘    │ │    └──────────┘ └──────────┘     │ │     │
 │                                  │ │                                  │ │     │
 └──────────────────────────────────┘ └──────────────────────────────────┘ │     │
                                                                           │─────┘
                                                                           │
Kroz ★★★★★
() автор топика
Ответ на: комментарий от kostik87

apt install libgraph-easy-perl

Размеры и положение не регулирует.

Нарисуй диаграмму такую как постом выше.

Kroz ★★★★★
() автор топика
Ответ на: комментарий от kaldeon

Уже предлагали генерацию по описанию? Подозреваю, ИИ в том числе будет проще понять.

У ИИ нет чувства прекрасного :). А если серъезно, то периодически ломает линии и коробки, приходится просить исправлять. То есть в агента какое не положишь, нужно ручное вмешательство.

Kroz ★★★★★
() автор топика
← Графические артефакты в браузере Chrome/Firefox
General
В продолжение предыдущей темы про Manjaro живых →
  • Markdown
Пустая строка (два раза Enter) начинает новый абзац. Знак '>' в начале абзаца выделяет абзац курсивом цитирования.
Внимание: прочитайте описание разметки Markdown.
Используйте Ctrl-Enter для размещения комментария