Pular para o conteúdo

Editor de diagramas ASCII

ASCII Diagram Editor

Desenha caixas, linhas, setas e rótulos numa grade de caracteres, derivando cada canto e junção dos vizinhos ocupados, em box drawing Unicode ou ASCII puro.

O que torna os diagramas ASCII dolorosos à mão são os cantos. Ponha um ┌ onde cabe um ┬ e o desenho fica sutilmente errado; decida depois que ele tem de ir num comentário de código-fonte e cada um desses caracteres tem de ser achado e trocado. Este editor nunca deixa você escolher um. Você diz onde há uma caixa e por onde corre uma linha, e cada célula deduz o próprio glifo a partir de quais dos quatro vizinhos estão ocupados — então linhas que se cruzam produzem ┼ sem que nenhuma saiba da outra, e passar o desenho inteiro para ASCII puro é uma configuração.

🔒 Roda inteiramente no seu navegadorasciidiagrameditordevelopertext
Ferramenta

Caracteres de desenho de caixas U+2500. Estão em toda fonte monoespaçada em uso desde mais ou menos 1995.

Forma selecionada

Nada selecionado. Escolha a ferramenta de seleção e clique numa forma.

Diagrama

 
Nenhum caractere de canto ou de junção é escolhido à mão. Uma caixa diz onde fica a borda dela e uma linha diz por onde passa; depois cada célula deduz o próprio glifo das quatro direções em que se conecta. É por isso que duas linhas que se cruzam dão um ┼ sem que nenhuma saiba da outra, e por isso que passar para ASCII puro é uma opção e não um localizar e substituir no seu desenho.
O conjunto ASCII perde informação de propósito: um único + para as onze junções e para os quatro cantos. Um diagrama que sobrevive a entrar num comentário de código, numa mensagem de commit, num Makefile ou num terminal com uma fonte de 1994 vale mais do que um mais bonito que chega como caixinhas.
Três coisas que ele não faz. Nada de linhas diagonais, porque nenhum caractere de box drawing é uma: arrastar na diagonal vira um cotovelo. Nada de roteamento automático em volta de obstáculos; a linha vai por onde você a colocar. E nada de quebra de texto dentro de uma caixa.

Como usar

  1. Arraste caixas primeiro, depois conecte

    Um arrasto com a ferramenta de caixa faz uma caixa; um clique faz a menor que ainda é uma caixa. Depois pegue a ferramenta de seta e arraste de uma para outra — um extremo que cai dentro de uma caixa é puxado para a célula de borda mais próxima, porque arrastar *até* uma caixa significa prender nela, e uma linha atravessando o meio nunca foi o que se queria.

  2. Escolha o conjunto de caracteres conforme o destino

    Caracteres de desenho de caixas Unicode para um README ou um terminal. ASCII puro — só - | + < > ^ v — para um comentário de código, uma mensagem de commit, um Makefile ou qualquer lugar em que a codificação não é certa. O conjunto ASCII é deliberadamente pobre: um + para todas as onze junções. Um diagrama que chega intacto vence um mais bonito que chega como caixas.

  3. Rotule as caixas pelo painel, não digitando dentro delas

    Selecione uma caixa e digite o rótulo no painel abaixo; ele é centralizado dentro automaticamente e se move com a caixa. Um rótulo mais largo que a caixa é cortado em vez de refluído, e a página diz quais — refluir mudaria a forma do desenho, o que não é coisa que um rótulo deva fazer.

Perguntas frequentes

Posso desenhar uma linha diagonal?

Não, e isso não é um recurso que falta. Não há caractere de desenho de caixas para uma diagonal — o bloco tem ─ │ e os cantos, e nada a 45 graus. Um arrasto que não é nem horizontal nem vertical é roteado como um cotovelo, que é o que o diagrama queria, e você pode escolher qual perna vai primeiro.

Ele desvia as linhas das minhas caixas?

Não. Roteamento ortogonal automático em torno de obstáculos é um algoritmo de verdade, e um ruim é pior do que uma linha reta que você mesmo colocou — ele mexe no seu diagrama enquanto você tenta desenhá-lo. As linhas vão onde você as põe.

Pode receber de

Em seguida

Estas aceitam o que esta ferramenta produz, então o resultado pode ir direto.

Gerador de tabela ASCII

ASCII Table Generator

Renderiza uma tabela em ASCII monoespaçado, Markdown ou bordas de desenho de caixa, para READMEs e comentários.

Roda inteiramente no seu navegador

Screenshot de código

Code Screenshot

Renderiza um trecho de código como imagem com destaque de sintaxe, moldura de janela e tema escolhido.

Roda inteiramente no seu navegador

Editor de Markdown

Markdown Editor

Edita Markdown com prévia ao vivo e exporta o HTML renderizado, com tabelas e listas de tarefas do GFM.

Roda inteiramente no seu navegador

Arte em texto para imagem

Text Art to Image

Renderiza qualquer arte em texto monoespaçado como PNG ou SVG com fonte, tamanho de célula, cor, fundo e transparência opcional escolhidos, para que sobreviva onde a fonte monoespaçada não é preservada.

Roda inteiramente no seu navegador

Horóscopo do dia por signo animal e signo

Daily Fortune by Zodiac Animal & Star Sign

Compõe a leitura de um dia para um signo animal ou signo do zodíaco a partir do 일진 do próprio dia e do temperamento tradicional do signo. Semeado pela data, então é o mesmo o dia inteiro e recarregar não sorteia outro — entretenimento; a tradição por trás não prevê nada.

Roda inteiramente no seu navegador

Compatibilidade de signos (궁합)

Zodiac Compatibility (궁합)

Duas datas de nascimento dão dois signos animais e dois troncos do dia. Informa a relação exata entre eles — 삼합, 육합, 충, 원진, 형, 파, 해 — e a relação dos cinco elementos entre os troncos do dia, cada uma com o veredito tradicional: a aritmética é exata, o veredito é folclore.

Roda inteiramente no seu navegador